How to edit a shared component from parent's HTML in angular 6

Question

child.component.ts

//ignoring all imports

@component({
   selector: 'app-child',
   template: './child.component.html'
})

import class ChildComponent {

   //logic not of use

   public isData: boolean = false;
}

child.component.html

<input type="text" value="xyz" [readonly]="isData">

parent.component.ts

//ignoring all imports

parent.component.html

<app-child></app-child>

Here, I wanted to use the child component inside parent but I don't want the input field readonly, rather changing it inside child I want to change it inside parent so that my child component should not gets disturbed.

How would I achieve it?

Answer 1

You should provide some parameter in child component which turn on/off read only property - e.g.

child.component.html

<input type="text" value="xyz" [readonly]="isData || onlyForRead">

child.component.ts

@Input('onlyForRead') onlyForRead: boolean;

parent.component.html

<app-child [onlyForRead]='false'></app-child>

Answer 2

You can query (get references) to all child components nested in the parent by using

@ViewChildren(ChildComponent) dataItems: QueryList<ChildComponent>

or get reference to only 1:

@ViewChild(ChildComponent) dataItem: ChildComponent;

Then you can subscribe and control the sate of each individual component from parent:

this.dataItem.isData = true // or false.

Answer 3

You can achieve with few simple steps:
In Child-Component.ts file:

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

@Input('isData') isData;

In parent-Component.html file:

<app-child isData="true"></app-child>