I'm trying to create a reusable search box component currently my setup is this.
search.component.html
<div class="search-box-container">
<fa-icon class="search-icon" [icon]="faSearch"></fa-icon>
<input type="search" name="search" class="search-box" autocomplete="off" />
</div>
search.component.ts
import { Component, OnInit } from '@angular/core';
import { faSearch } from '@fortawesome/free-solid-svg-icons'
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
faSearch = faSearch;
constructor() { }
ngOnInit() {
}
}
and I want to use it accross multiple components like this:
<app-search [ngModel]="searchString" (onUpdate)="updateSearch"></app-search>
My question is how do I access the parent ngModel and onUpdate set in the main component inside of a structured component.
As per @Stanisalv answered in comments:
In your main component, you just bind to your search component's public properties with
@Output
decorator.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments