Angular 2 Show and Hide an element

by

There are two options depending what you want to achieve :

  1. You can use the hidden directive to show or hide an element

    <div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>

  2. You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.

    <div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>

For you problem of change after 3 seconds, it can be due to incompatibility with setTimeout. Did you include angular2-polyfills.js library in your page ?

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. Angular 2 custom form input
  3. How to get query params from url in Angular 2?
  4. How to inject Document in service?
  5. When I refresh my website I get a 404. This is with Angular2 and firebase
  6. WARNING: sanitizing unsafe style value url
  7. Angular 2: Convert Observable to Promise
  8. Angular2: How to load data before rendering the component?
  9. Extending component decorator with base class decorator
  10. How to prepare release version with SystemJS and Gulp?
  11. Angular2 canActivate() calling async function
  12. How to display json object using *ngFor
  13. How to avoid imports with very long relative paths in Angular 2?
  14. Select based on enum in Angular2
  15. Angular no provider for NameService
  16. Angular2 – Share data between components using services
  17. Accessing a property in a parent Component
  18. TypeScript error in Angular2 code: Cannot find name ‘module’
  19. Visual Studio Code Automatic Imports
  20. Get route query params
  21. RxJs get value from observable
  22. Angular 2 ngModel in child component updates parent component property
  23. Angular2 – root relative imports
  24. How to implement Custom Async Validator in Angular2/4/5
  25. Import gapi.auth2 in angular 2 typescript
  26. Angular 2 loader on each http request
  27. detect change of nested property for component input
  28. What exactly $event object do in Angular 2?
  29. How to place a dynamic component in a container
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment