Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables. The shared service can look something like this: import … Read more
If you add a component using ViewContainerRef.createComponent() like shown in Angular 2 dynamic tabs with user-click chosen components, then the component can destroy itself when you pass cmpRef to the created component. Otherwise I don’t think there is a way. You can pass a value to the parent so that an *ngIf removes the component. … Read more
You can use @ViewChild with a div by adding a TemplateRef. Template <div id =”myId” #myId> Component import { Component, ViewChild, ElementRef, AfterViewInit } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent implements AfterViewInit { @ViewChild(‘myId’) myId: ElementRef; constructor() { } ngAfterViewInit() { console.log(this.myId.nativeElement); } } This blog post by … Read more
I’m prefixing @Output events with the name of my components, which seems to work pretty well and to provide a consistent and clear convention which avoids the problems you describe. For example, suppose I have a component named, e.g. TurnEditorComponent — @Output events might be named turnEditorChange, turnEditorFocus, turnEditorBlur and so on.
Guess I’m a little late to the party, However this may be useful to some one in the future. There have been a few changes to testing since RC 5 of angular has been released. However the main issue over here is ngOnChanges is not called when inputs are set programmatically. See this for more … Read more
You can use the ( ? ) operator as below import {Component,Input} from ‘@angular/core’; @Component({ selector:’child’, template:`<h1>Hi Children!</h1> <span *ngIf=”showName”>Alex!</span>` }) export class ChildComponent { @Input() showName?: boolean; constructor() { } } The parent component that uses the child component will be as @Component({ selector: ‘my-app’, template: ` <div> <h2>Hello {{name}}</h2> <child [showName]=”true”></child> <child ></child> … Read more
You need to add Input property to your component and then use property binding to pass value to it: import { Component, Input } from ‘@angular/core’; @Component({ selector: ‘my-custom-component’, templateUrl: ‘./my-custom-component.html’, styleUrls: [‘./my-custom-component.css’] }) export class MyCustomComponent { @Input() customTitle: string; constructor() { console.log(‘myCustomComponent’); } ngOnInit() { console.log(this.customTitle); } } And in your template: <my-custom-component … Read more
The beta release of Angular (since vesion 2-alpha.51) supports relative assets for components, like templateUrl and styleUrls in the @Component decorator. module.id works when using CommonJS. You don’t need to worry about how it works. Remember: setting moduleId: module.id in the @Component decorator is the key here. If you don’t have that then Angular 2 … Read more
First, what you need to understand the relationships between components. Then you can choose the right method of communication. I will try to explain all the methods that I know and use in my practice for communication between components. What kinds of relationships between components can there be? 1. Parent > Child Sharing Data via … Read more