I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code:
import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-root',
template: `
<h1>parent</h1>
<button (click)="changeChild()">change child</button>
<app-child></app-child>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private cc:ChildComponent) {}
changeChild(){
this.cc.change();
}
}
The child component looks like this:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<p>{{str}}</p>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
private str;
constructor() {
this.str = 'initial'
}
change(){
this.str = 'changed'
}
ngOnInit() {
}
}
However, when running the application, the value of "str" in the view does not update to "changed". Can someone please assist me? I am new to Angular 4 and would greatly appreciate any help.