You can access an immediate child directive or component in a few ways:

• Using a template local variable for the child component instance.
• Using the @ViewChild decorator. This is strongly typed and recommended over template local variables.
• Use the @ViewChildren decorator to get a collection of children and monitor changes in that collection.

Note:

These give you access to immediate children and not any arbitrary descendants down the hierarchy.

Children referenced by @ViewChild have two types:

• Dynamic {static:false} – If they are wrapped by an ngFor or ngInit and are thus subject to change.
• Static {static:true} – If they are not dynamic

The child’s static state needs to be declared in the second parameter (options) of the @ViewChild annotation.

@ViewChild('ch1', {static:true} ) prop1: StaticChildComponent;
@ViewChild('ch2', {static:false} ) prop2: DynamicChildComponent;

As a rule properties based on Dynamic view children should be used only after the view initializes (for example from within ngAfterViewInit()) and not before.

There may be several objects associated with the same element in the template. For example, an element can have many attribute directives. You can specify the object you need by supplying its type in the options object parameter of @ViewChild.

@Component({
  selector: 'app-parent',
  template: `<div #d></div>`
})
export class ParentComponent implements OnInit {
  @ViewChild("d", 
   {static: false, read: ViewContainerRef}) childContainer
  @ViewChild("d", 
   {static: false, read: ElementRef}) childElement

  ngOnInit() {
    console.log(this.childContainer)
    console.log(this.childElement)
  }
}

Notes:

You specify the type of object instance you are querying using the “read” property. If you do not supply the read property Angular behaves this way:

• If the child is a component tag then the component instance is returned.
• Otherwise, the ElementRef instance for the tag is returned.

Similar to @ViewChild but gives you access to a collection of all matching children.

import { Component, AfterViewInit, ViewChildren, QueryList } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child ="1"></app-child>
  <app-child ="2"></app-child>`
})
export class ParentComponent implements AfterViewInit {

  @ViewChildren(ChildComponent) childList: QueryList<ChildComponent>

  ngAfterViewInit() {
    this.childList.forEach(child => 
        console.log(child.counter))
  }
}

Note:

The @ViewChildren decorator does not require the static state {static:boolean} option parameter like we saw with @ViewChild

You can monitor any dynamic addition or removal of children.

@Component({
  selector: 'app-parent',
  template: `<app-child ="1"></app-child>
  <app-child *ngIf="showTwo" ="2"></app-child>`
})
export class ParentComponent implements AfterViewInit {
  showTwo = false
  @ViewChildren(ChildComponent) childList: QueryList<ChildComponent>

  ngAfterViewInit() {
    this.childList.changes.subscribe(queryList => 
      queryList.forEach(child => console.log(child.counter)))

    window.setTimeout(_ => this.showTwo = true, 1000)
  }
}

Note:

In the example above we add the second child after one second. This change is picked up by our subscription callback. The callback receives a new QueryList which you can iterate over.

You can inject an instance of an ancestor component.

export class ChildComponent implements OnInit {
  constructor(private parent:ParentComponent, private grandParent:AppComponent) { }
}

Since @ViewChild and @ViewChildren do not give access to deeply nested children it is better for these children to lookup an ancestor and initiate communication.

To restrict the search to the immediate parent use @Host.

constructor(@Host() private parent:ParentComponent) { }

You can make a component more flexible by not requiring it to have a specific parent. Use @Optional for that.

constructor(@Optional() @Host() private parent:ParentComponent) { }

Notes:

@ViewChild and @ViewChildren limit access to the immediate children only. They are not very suitable when a parent needs to communicate with a deeply nested descendent. In a situation like that it will be much easier for the descendants to lookup an ancestor component and then make method calls to initiate communication.

In this example, C1 component is publishing a message.

@Component({
  selector: 'app-c1',
  template: `<button (click)="publish()">Go</button>`
})
export class C1Component {
  constructor(private tm:TopicManagerService) { }

  publish() {
    this.tm.cartTopic.next({itemId: 1001, qty: 2})
  }
}

In this example C2 is subscribing. Code will be same for C3.

export class C2Component implements OnInit {
  constructor(private tm:TopicManagerService) { }

  ngOnInit() {
    this.tm.cartTopic.subscribe(item => console.log(item))
  }
}

If you subscribe after a message is posted you will not receive the message. This can be a problem if components are posting and subscribing from ngOnInt since the order of initialization can be hard to control.

To receive the last posted message even if you have subscribed late, use the BehaviorSubject class instead of a plain Subject. The constructor needs a starter message which can be undefined.

public cartTopic = new BehaviorSubject<CartItem>(undefined)

To receive more than one last posted messages use ReplaySubject. The constructor takes the number of past messages.

public cartTopic = new ReplaySubject<CartItem>(5)

The ng-content directive lets you specify a placeholder. A user of the component can supply the actual template for that area. Below is a card component that has two placeholders.

@Component({
  selector: 'app-card',
  template: `<div class="card">
    <ng-content select=".title"></ng-content><hr/>
    <ng-content select=".body"></ng-content>    
  </div>`
})
export class ChildComponent {}

ng-content takes a CSS selector which helps the parent supply different templates for different placeholders. We see that next.

Here a user of the card component supplies its templates using matching CSS selectors.

@Component({
  selector: 'app-parent',
  template: `<app-card>
    <div class="title">First Card</div>
    <div class="body">First card body here.</div>
  </app-card>
  <app-card>
    <div class="title">{{title2}}</div>
    <div class="body"><button (click)="greet()">Hello</button></div>
  </app-card>`
})
export class ParentComponent {
  title2 = "Second Title"
  greet(){}
}

Notes:

The template supplied by the parent has full access to its own properties and methods. We see that above in the second card. This works just fine even though the template will actually be executed inside the card component. Without this feature it will be very difficult to create a generic card component that can host any content. Content projection makes it all very easy.

Use the :host pseudo selector from the component’s CSS.

:host {
    display: block;
    border: 1px solid black;
    width: 200px;
    position: absolute;
}

Use the @HostBinding decorator to one-way bind a component property to a DOM property of the host element.

The following example shows the host element and sets its position.

export class PopupMenuComponent {
  @HostBinding("style.top") y = "0px"
  @HostBinding("style.left") x = "0px"
  @HostBinding("style.visibility") visibility = "hidden"

  openAt(x:number, y:number) {
    this.x = `${x}px`
    this.y = `${y}px`

    this.visibility = "visible"
  }
}

export class HostComponent {
  isBasic = true
  @ViewChild("compHost", 
             {static: true, read: ViewContainerRef}) 
    container:ViewContainerRef

  constructor(private resolver: ComponentFactoryResolver){}

  changeView() {
    let compClass = this.isBasic ? 
      BasicViewComponent : FullViewComponent
    let factory = 
      this.resolver.resolveComponentFactory(compClass)

    this.container.clear() //Remove old component
    let compRef = this.container.createComponent(factory)
  }
}

Notes:

Two key players here are ComponentFactoryResolver and ViewContainerRef. A ViewContainerRef is used to insert a component instance into the component tree. Every element in a template has an associated ViewContainerRef. Here we look it up for the tag with the local variable “compHost”.

Register the dynamically loaded components to the entryComponents list of the application module.

@NgModule({
  declarations: ,
  imports: ,
  entryComponents: [
    BasicViewComponent,
    FullViewComponent
  ],
...
})
export class AppModule { }

Component B does not need to run its template for every key stroke in the parent component (A). It can use the OnPush strategy.

@Component({
...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BComponent {@Input() todoList = []}

Now the template of B will be run only if any of its bound @Input variables have changed.

Unfortunately, this will not solve our problem. Component A adds new items to the existing array. Angular only does shallow checks for changes in the object reference. It does not check if the contents of a variable (such as an array or an object) have changed. We will see next how to work around this.

A parent needs to set an entirely new object to a bound property of a child for Angular to realize that the property has changed. In our case AComponent needs to create a new list. Now the template of B will be run only after user has clicked on the Add button.

addItem() {
  this.list = 
}

Note:

Recreating a large array like this can be expensive. To solve that issue, store the array inside an object and just recreate the object. Pass the object as input to the child.