父组件的角度5设置子组件属性

Question

I want to set the child component property from parent component

parent.component.html

<div>
<child-detail #myCarousel [childList]="detail.List" ></child-detail>
</div>  

parent.component.ts

@Component({
  selector: "parent",
  templateUrl: "./parent.component.html",
 })  
export class AppComponent { 
  public detail; // it is of JSON type
}

child.component.ts

@component({
 selector:'child-detail',
 templateUrl: './child.component.html'
})
export class ChildDetailComponent{
  @Input() public childList;   // that list of array type
}

child.component.html

<div *ngFor = "let list of childList">
 <li>{{list}} </li>
</div>

I know i can set this property by @Input() binding , but this will set only at the time of initializing of the component , I want to set it programmaticaly in intermediate at some point .

I know I can access this child property in parent using

@ViewChild(ChildDetailComponent) childDetailComponent: ChildDetailComponent;
console.log(this.childDetailComponent.childList);

But I want to set it programatically at any event of parent.

Answer 1

I'm not sure how you're doing it without using the @Input property.

Whenever the input you've passed to it changes, it will also reflect in the Child Component. You can track it in ngOnChanges in the Child Component. Just try log ging to the console

Give this a try:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  detail: any = {
    childList: []
  };

  setChildList() {
    this.detail.childList = [
      { id: 1, name: 'John' },
      ...
    ];
  }

}

And in the template:

<button (click)="setChildList()">Set Child List</button>
<hello [childList]="detail.childList"></hello>

Here the @Input property is changing on the Click of the Button. But in your case, you can simply call the setChildList method your event.

---

Here's a Working Sample StackBlitz for your ref.

Answer 2

use @input in child component. can listen to the changes in child component using ngOnChanges .

@Input() name: string;

ngOnChanges(changes: SimpleChanges) {
  const name: SimpleChange = changes.name;
  console.log('prev value: ', name.previousValue);
  console.log('got name: ', name.currentValue);
}

working stackblitz

Answer 3

You can use service for the sharing data pragmatically.

Step 1 : Create data share service.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

} 

Step 2: Change message

export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
   this.data.changeMessage("Hello from Sibling")
  }

Step 3: Get message

export class ChildComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}