Angular 5 Structural Directive

Joel Podrebarac

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.

shohrukh

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.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 5 - lifecycle hook in directive

using HostListener in a structural directive

Creating a custom structural directive

Angular structural directive: wrap the host element with some another component

Why Angular 2+ structural directive doesn't update the view?

Angular structural directive and Renderer2

Structural directive's context not updated

ngSwitch is "Attribute Directive" OR "Structural Directive" ?

Wrap Angular ngFor directive with another structural directive

Angular directive for CKEditor 5 not working

Declare variable in structural directive

Passing multiple parameters to a structural directive in AngularDart 5

How to write unit test for structural directive prefixed with an asterisk * in Angular

Angular testing component with mocked structural directive fails

How to debug Angular *ngIf structural directive using Chrome within my project?

Using dynamic component within Angular structural directive produces extra HTML tag. How to remove or replace it?

Accessing ViewChildren/ContentChildren in a structural Directive

Angular Structural Directive with multiple parameters

angular2 structural directive with String as input

Angular 2 structural directive, clear view reference upon non bubbling event triggered by child

Angular 5: What an example a directive change another directive?

How to create the two structural directive in angular 6?

Angular2 bind value to structural directive

angular templateRef passed to parent using structural directive not rendering inside parent component

Structural directive get child directive

Angular custom structural directive fails to rebuild ViewContainer if template contains *ngIf

Why does the Angular structural directive *ngIf conflict with the [hidden] DOM property when used within the same HTML element?

Angular 11 structural directive breaks when compiling via AOT

Can I make an Angular structural directive in the form `myDirective('p')` that passes a value from the HMTL view to the directive?