Angular2 calling custom function after ngSwitch new view is created

by

There is no built-in support of calling a function when ngSwitch adds/removes elements.

I would create a directive that calls the function when created (for example in ngOnInit()) or emits an event where an event handler can be bound to, and apply it to the component that is added when the ngSwitch branch is enabled.

If ngSwitch adds a component you can implement it in this component as well (depends on your requirements)

update

    <ion-list (onCreate)="doSomething()" *ngSwitchCase="'list'">
       Listing
    </ion-list>

@Directive(selector: '[onCreate]')
export class OnCreate implements OnInit {
  @Output() onCreate:EventEmitter = new EventEmitter();

  ngOnInit() {
    this.onCreate.emit('dummy');
  }
}

Plunker example

More Related Contents:

  1. Wait for multiple promises to finish
  2. using external JS libraries in my angular 2 project
  3. Safe value must use [property]=binding after bypass security with DomSanitizer
  4. typescript anonymous object with variable based label value
  5. How to pass parameters rendered from backend to angular2 bootstrap method
  6. CORS Error: “requests are only supported for protocol schemes: http…” etc
  7. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  8. Verify if a point is Land or Water in Google Maps
  9. Google Maps v3 – limit viewable area and zoom level
  10. Using http rest apis with angular 2
  11. Angular 2: How to detect changes in an array? (@input property)
  12. Angular 2 optional route parameter
  13. Angular 2: import external js file into component
  14. What is #auto attribute here and why it is required
  15. Angular app has to clear cache after new deployment
  16. Module not found: Error: Can’t resolve ‘crypto’
  17. How can I get city name from a latitude and longitude point?
  18. How to handle window scroll event in Angular 4?
  19. Prevent IE11 caching GET call in Angular 2
  20. Nested arrays in Angular 2 reactive forms?
  21. Midpoint of route in google maps
  22. Angular: In which lifecycle hook is input data available to the Component
  23. Angular 4 Filter Search Custom Pipe
  24. Angular 2 typescript invoke javascript function
  25. How to handle query parameters in angular 2
  26. Angular 6: ERROR TypeError: “… is not a function” – but it is
  27. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  28. How to check empty object in angular 2 template using *ngIf
  29. How can I apply a quantity limit to *ngFor? [duplicate]
  30. How can I tell if Google’s Streetview Image API Returns “Sorry, we have no imagery here” (ie. NULL) Result?

Leave a Comment