pass input text value to an angle function

Question

Could someone help me pass the content of an input text to a function at the angle?

my html is:

 <form class= "form mt-4">

<mat-card>
    <mat-card-header>
    <mat-card-title>{{ 'buscaAtestado' | translate }}</mat-card-title>
    </mat-card-header>

    <div class="text-center mb-3">
        <i class="fa fa-search mr-2"></i>
        <input  [value]="filter"  class= "rounded mb-3" type="search" placeholder="search..." autofocus>
        <section fxLayout="row" fxLayout.xs="column" fxLayoutWrap class="container" fxLayoutAlign="center center" fxLayoutGap="20px" fxLayoutGap.xs="20px">
            <button type="button" mat-raised-button class="download" (click)="baixarTodos()">{{ 'baixarAtestados' | translate}}</button>
            <button type="reset" mat-raised-button class="limpar" (click)="onClean()"> {{ 'limpar' | translate }}</button>
            <button type="submit" mat-raised-button class="pesquisar" (click)="onSearch()">{{ 'pesquisar' | translate }}</button>
        </section>
    </div>
</mat-card>

and my:

@Component({
selector: 'app-atestado',
templateUrl: './atestado.component.html',
styleUrls: ['./atestado.component.scss']
})
export class AtestadoComponent implements OnInit {


filter: string= '';


constructor(
    private projetoService: ProjetoService) {}

ngOnInit(): void {


}

onSearch(){
    console.log(this.filter)
}

Answer 1

Hello hello hello, a way to access input can be as answered earlier, with 2 way Binding.

<input  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>

@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {


private filtro: string= '';


constructor() {}

ngOnInit(): void {
}
}

Alternative:

<input #myInput  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>

import { Component,Inject,ViewChild,ElementRef,AfterViewInit} from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {

@ViewChild('myInput') myInput:ElementRef; 
private filtro: string= '';

constructor() {}

ngAfterViewInit() {
    console.log(this.myInput.nativeElement.value);
    }
}

Angular 8, on the option with Viewchild, add the Static parameter:

@ViewChild('myInput', {static: true}) myInput:ElementRef; 

Answer 2

ran with ngModel and failed to name the tag

<input  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>

Answer 3

First you need to insert some event in your template, in this case the event "onchange".

<input type="search" (change)="//seu methodo" />

Once done, insert your method with the parameter you wish to pass to it.

Examples

Passing a fixed value:

 <input type="search" (change)="onSelect('foo')" />

defining a variable for your element and rescuing its values, example:

<input type="search" #mySearch (change)="onSearch(mySearch.value)" />

rescuing the elemetho itself:

// no template
<input type="search" (change)="onSearch($event)" />

// na sua classe:
onSearch(event) {
  const value = event.target.value;
}