Evento de teclado na guia pesquisar
17/02/2020
0
Tentei debugar pela ferramenta de desenvolvedor, inclui consoles e alerts para encontrar o evento de digitação da caixa de pesquisa, porém não encontrei. Parece que isto é feito de maneira assincrona encapsulado pelo componente que não dispara um evento e nem reinderiza a pagina. Dessa forma não consigo tratar.
Estou começando em angular agora e não sei como resolver isso. Será que poderiam me ajudar, por favor?
Renato Neto
Posts
18/02/2020
Kleber Santos
Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur
18/02/2020
Renato Neto
Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur
Obrigado pelo retorno Kleber,
Testei outros eventos e métodos, de fato o onBlur é acionado ao colocar o evento dentro do input, mas não necessariamente deveria ocorrer quando se perde o foco. Talvez se eu fizer uma gambi, se após apagar o conteúdo eu tiro o foco do elemento.
Segue trecho do código:
import { Component, OnInit, Input, OnChanges, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core'; import { stringify } from 'querystring'; @Component({ selector: 'ig-pesquisa', templateUrl: './pesquisa.component.html', styleUrls: ['./pesquisa.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PesquisaComponent implements OnInit, OnChanges { @ViewChild('dataContainer') dataContainer: ElementRef; ngOnChanges(changes: import("@angular/core").SimpleChanges): void { const txtidpesquisa = (<HTMLSelectElement>document.getElementById('pesquisa')).value; //console.log('idpesquisa: ' + idpesquisa); //debugger ; //console.log(changes); //alert('txtidpesquisa: ' + txtidpesquisa); console.log('RDN - 0: ngOnChanges -> pesquisa.component.ts'); this.html = this.actualText; console.log('RDN: - 0.1: ngOnChanges -> ' + this.html) this.dataContainer.nativeElement.innerHTML = this.html; const divConteudo = document.getElementById('divConteudo'); divConteudo.innerHTML = this.actualText; console.log('RDN - 1: ngOnChanges -> pesquisa.component.ts'); } constructor(){ console.log('RDN - 3: ngOnChanges -> pesquisa.component.ts'); } @Input() html:string; @Input() actualText =''; @Input() conteudo: string; @Input() searchText: string; ngOnInit() { console.log('RDN - 2: ngOnInit -> pesquisa.component.ts' + this.actualText); //alert('Botão clicado!'); } teste() { alert('teste'); } /* ngAfterContentInit(){alert('ngAfterContentInit');} ngAfterContentChecked(){alert('ngAfterContentChecked');} ngAfterViewInit(){alert('ngAfterViewInit');} ngAfterViewChecked(){alert('ngAfterViewChecked');} ngonDestroy(){alert('ngonDestroy');} */ }
<input class="form-control mr-sm-2" type="text" name="search" placeholder="Pesquisar" aria-label="Search" value="Highlight" [(ngModel)]="searchText" id="pesquisa" > <div #dataContainer id="divConteudo" ngxTextHighlight [content]=html [searchTerm]="searchText" [caseSensitive]="false"> </div>
Eu ainda tentei, colocar alguns logs e alerts mas não consegui identificar o momento em que é substituido o conteúdo da div que exibe os dados
18/02/2020
Kleber Santos
Tente procurar nas documentações, pelo que entendi ele está manipulando o DOM.
Segue abaixo algumas documentações que podem te ajudar:
https://github.com/mraghuram3/ngx-text-highlight/issues/1
https://mraghuram3.github.io/#/ngx-text-highlight
https://github.com/mmounirf/ngx-text-highlighter
Procure na busca do GitHub por trechos de código, eu particularmente sempre acho algum projeto publico para servir de exemplo.
Clique aqui para fazer login e interagir na Comunidade :)