Angular - Update a tag in an imported template

Question

I have an application in which I need to import a component in another one, and use the imported component template.

Is it possible to change an HTML tag in the parent template. For example:

I have a component "component-a", with this template:

  <input type="text" class="form-control">

In component "component-b" template, I would like to add attributes to the input tag above. "component-b" template example:

<h3>Enter your name:</h3>
<component-a></component-a>

How to update the input tag? Thanks.

Answer 1

You can use an input variable in component-b @Input() modifyInput: boolean = false; .

Now you can add attributes based on the boolean:

<input type="text" class="form-control" [attr.name]="modifyInput ? 'Modified' : 'unmodified'"/>

Answer 2

Yes. For an instance lets take the value attribute of <input>

// component-a
@Component({
selector:'component-a',
template:'<input type="text" value={{inputData}} class="form-control">'
})
export class ComponentA{
@Input()
inputData:string;
}

// component-b
<component-a [inputData]="'hello'"></component-a>