Angular error WARNING: sanitizing unsafe style value display: none (see http://g.co/ng/security#xss)

Question

Angular error WARNING: sanitizing unsafe style value display: none (see http://g.co/ng/security#xss)

Navigation

#1 by (1 votes)

2

Hi, I'm good at this and I have no idea how to make a form hidden but when you click on a button it shows that div that has display: none, try to set it in the class of .TS by putting the variable visibility display none and when clicking put display block but nothing, I get cross site scripting error:

WARNING: sanitizing unsafe style value display:none (see http://g.co/ng/security#xss).

import { Component, OnInit } from '@angular/core';
import  foods  from './../../../shared/data/food.data';
import { Food } from './../../../shared/models/food.model';

@Component({
  selector: 'app-food-list',
  templateUrl: './food-list.component.html',
  styleUrls: ['./food-list.component.css']
})
export class FoodListComponent implements OnInit {
  allFood: Array<Food> = [];
  newFood: Food = new Food();
  preview: string = '';
  visibility:string = 'display:none';
  constructor() { }
  
  ngOnInit() {
    this.allFood = foods;
  }
  
  onClickAddFood():void{
    this.allFood.push(this.newFood);
    this.newFood = new Food();
    this.preview = '';
  }

  createForm():void{
    this.visibility = 'display:block'
  }
}

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <label for="search">Search</label>
        <input type="text" placeholder="Search food" style="width:100%">
        
        <button class="btn-secondary" (click)="createForm()">Create food</button>

        <div class="mt-5" [style]="visibility">
          <!-- <form> -->
            <label for="search">Name</label>
          <input [(ngModel)]="newFood.name" type="text" placeholder="name">
          
          <label for="search">Calories</label>
          <input [(ngModel)]="newFood.calories" type="text" placeholder="calories">
          
          <label for="image">Image</label>
          <input [(ngModel)]="newFood.image" [(ngModel)]="preview" type="text" placeholder="image">   
          <button class="btn-primary" (click)="onClickAddFood()">Add food</button>  
          <!-- </form> -->
         </div>     
      
      </div>
      <div class="row">
        <div class="card" style="width: 18rem;" *ngFor="let food of allFood">
          <img class="card-img-top" [src]=food.image alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">{{food.name}}</h5>
            <h6 class="card-subtitle mb-2 text-muted"> {{food.calories}}Calories</h6>
            <select name="" id="">
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
            </select>
          </div>
        </div>
        
      </div>
    </div>
    <div class="col-6">
      <p>Todays food calories: <span></span></p>
      <div>
        <img [src]="preview" alt="" style="width:200px;">
      </div>
    </div>
  </div>
</div>

javascript angular

asked by Francisco Manrique de lara 11.09.2018 в 09:57

source

1 answer

Save in BBDD the selected row of a JTABLE Use stylesheet in a qtablewidget to send properties of a cell

score 1 · Answer 1

You have two simple options, which involve making a small change to the component: Instead of declaring

visibility:string = 'display:none';

usa

visible = false;

With what the modifying method would be like

createForm():void{
  this.visible = true;
}

And in your template you can change

<div class="mt-5" [style]="visibility">

for one of these two options:

<div class="mt-5" [style.display]="visible ? 'block' : 'none'" >
  ...
</div>

or

<div class="mt-5" *ngIf="visible" >
  ...
</div>