Trying to grasp the concept of the @ViewChildren() decorator. I've created a Component named Component-A that takes in a user's email address. Next, I built a parent component called "Component-B" which includes two instances of Component-A. I have come across tutorials on how parent and child components can communicate using Event and property binding with the help of @Input() and @Output() decorators. But is there a way to achieve the same functionality using @ViewChildren(), where we compare both entered emails and display a message if they match?
@Component({
selector: 'component-A'
styleUrls: [],
templateUrl: `<form>
<div>
<fieldset>
<legend>Component A</legend>
<div class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</fieldset>
})
export class ComponentA {
}
Now let's look at Component B:
@Component({
selector: 'component-B',
styleUrls: [],
templateUrl: `
<form>
<div>
<fieldset>
<legend>Parent Component</legend>
<div class="form-horizontal">
<div class="form-group">
<label for="1" class="col-sm-2 control-label">1</label>
<div class="col-sm-10">
<component-A></component-A>
</div>
<div class="form-group">
<label for="2" class="col-sm-2 control-label">2</label>
<div class="col-sm-10">
<component-A></component-A>
</div>
</div>
</div>
</fieldset>
</div>
</form>
})
export class Parent {
}