Para Angular 8: (devemos transformar o args[] em LocaleString primeiro antes de aplicar o lower case) const filter = args.toLocaleString().toLocaleLowerCase(); return value.filter( v => v.toLocaleLowerCase().includes(filter) );
Curso simplesmente maravilhoso Mas devo dizer que devido ao fato de estar usando uma versão diferente do angular, essa aula foi um tanto quanto complicada de acompanhar Atualmente na versão 16 do framework, muita das coisas citadas na aula está completamente diferente Claro o conceito é o mesmo e nada impede de pesquisar e olhar a documentação pra ver como é que faz agora Contudo, mesmo funcionando ainda não ficou funcionando perfeitamente como o mostrando no vídeo Funcionou de uma forma um tanto quanto "burr@" kkkkk Obrigado loiane Curso maravilhoso, só tenho a agradecer ❤ Código quase funcional abaixo: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filtroArray' }) export class FiltroArrayPipe implements PipeTransform { transform(value: any, args?: any): any { if (value.length === 0 || args === undefined) { return value; } let filter = (args[0] as String).toLocaleLowerCase(); return value.filter((v:any) => v.toLocaleLowerCase().includes(filter)); } }
No Angular 8, meu método 'transform', aproveitando a dica nos comentários de Melvin Fernandes, ficou assim: transform(value: any, ...args: any[]): any { if ( value.length === 0 || args === undefined ) { return value; } const filtro = (args[0] as String).toLowerCase(); return value.filter ( v => v.toLocaleLowerCase().includes(filtro) ); } e o código HTML usei assim:
{{ liv }}
... permitindo-me usar, inclusive, mais de um filtro.
Quando eu faço o push() clicando no botão, o novo curso é inserido no array, mas não aparece na tela, apenas quando uso o filtro ele surge. Alguem tem alguma idéia do que possa estar ocorrendo?
Pessoal, desculpa responder minha própria pergunta.. Achei a resposta KKK. Pra fazer a alteração no DOM, eu adicionei o statement pure:false no @Pipe do pipe.ts, e importei no componente o ChangeDetectionStrategy, incluindo o changeDetection: ChangeDetectionStrategy.OnPush no @Component.
Para o angular 11 não se esquecer de colocar o FormsModule lá no app.module: import {FormsModule} from '@angular/forms' ... Imports: [ ... [FormsModule], ... ]
no angular 14 substitua on unknown por any e infira o tipo no return: transform(value: any, ...args: any[]): any { if(value.length === 0 || args === undefined){ return value; } let filter = args.toLocaleString().toLowerCase(); return value.filter( (v:any) => v.toLocaleString().toLowerCase().indexOf(filter) != -1 ); }
Ficou muito confusa essa aula. Alguém sabe me dizer porque meu ngFor mostra "[object Object]" no lugar do nome da string? Sendo que a mesma está tipada como string no meu componennte "livros: string[] = ['Java', 'Ionic'];"
talvez alguem está com problema nas novas versão do angular que ele nao está atualizando o array de "livros" tenta fazer assim addCurso(valor: string){ this.livros = [...this.livros, valor] console.log(this.livros); }
Oi Loiane parabéns pelo vídeos. Uma dúvida: no angular 1 podíamos realizar filtros de campos e objetos. Existe uma maneira mais recomendada de implementar este mesmo recurso ?? Obrigado
a partir da aula 46 - Pipes Puros obetenho o seguinte erro: An unhandled exception occurred: Cannot find module 'D:\dev\javascript\cursoAngula2Loiane\pipes ode_modules\webpack\lib\index.js'. Please verify that the package.json has a valid "main" entry See "C:\Users\pedro\AppData\Local\Temp g-WmWFlb\angular-errors.log" for further details. [error] Error: Cannot find module 'D:\dev\javascript\cursoAngula2Loiane\pipes ode_modules\webpack\lib\index.js'. Please verify that the package.json has a valid "main" entry at tryPackage (internal/modules/cjs/loader.js:308:19) at Function.Module._findPath (internal/modules/cjs/loader.js:521:18) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:872:27) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Module.require (internal/modules/cjs/loader.js:957:19) at require (internal/modules/cjs/helpers.js:88:18) at Object. (D:\dev\javascript\cursoAngula2Loiane\pipes ode_modules\@angular-devkit\build-webpack\src\webpack\index.js:37:35) at Module._compile (internal/modules/cjs/loader.js:1068:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) at Module.load (internal/modules/cjs/loader.js:933:32) Alguem pode ajudar?
Alguém mais teve problemas com o input do filtro? Implementei aqui, de acordo com a aula, não recebo nenhum erro no console porém não o input não realiza a filtragem. Talvez algum novo import seja necessário, se alguém souber comenta aí porfavor.
@@oplayboydoface se te ajudar eu comecei por esse cód mas acabou ficando de lado o projeto é n melhorei ele import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'aulasFilter'})export class AulasFilterPipe implements PipeTransform { transform(aulas: any, args?: any): any { //se n tiver argumento o pipe retorna o valor como está if (aulas === '' || aulas === 'undefined' || !args) { return aulas;//Até aqui está tudo ok } if (args) { //console.log('Há argumentos pipe: ', args); aulas.forEach(aula => { let au = aulas.filter(aula => aula.descricao.toUpperCase().indexOf(args.toUpperCase()) !== -1); console.log(au) let instrutor = aulas.filter(aula => aula.instrutor_id.toUpperCase().indexOf(args.toUpperCase()) !== -1); if (au.length > instrutor.length) { aulas = au } else { aulas = instrutor } }); return aulas; } } }
Puxa vida... Aqui não rolou essa função... A configuração da minha máquina é: Angular CLI: 15.2.2 Node: 18.15.0 Package Manager: npm 9.6.1 OS: win32 ia32 Estava tomando erro toLocaleLowercase() is not a function from args... Dei umas buscas no google e, aqui, funcionou da seguinte forma: transform(value: any, ...args: any): any { if(value.length === 0 || args === undefined){ return value; } let filter = String(args).toLowerCase(); return value.filter( (v:string) => v.toLowerCase().indexOf(filter) != -1 ); } Tb estava tomando erro de [(ngModel)] no input type do pipe. component.html Busquei aqui e vi que precisamos importar a biblioteca FormsModule no appModule.ts, assim: import { FormsModule } from '@angular/forms'; imports: [ [outras bibliotecas], FormsModule ], Com isso, funcionou!
![ประสบการณ์ จ้าง Developer ที่ผมจะไม่มีวันลืม [ภาค2]](http://i.ytimg.com/vi/pZbsSDRrmXA/mqdefault.jpg)
Para Angular 8: (devemos transformar o args[] em LocaleString primeiro antes de aplicar o lower case)
const filter = args.toLocaleString().toLocaleLowerCase();
return value.filter(
v => v.toLocaleLowerCase().includes(filter)
);
Valeu monstro!!!
**** Para o form funcionar:
No apps.module inclua o
import { FormsModule } from '@angular/forms';
e
imports: [
BrowserModule,
FormsModule
],
Obrigado !
Herói.
Curso simplesmente maravilhoso
Mas devo dizer que devido ao fato de estar usando uma versão diferente do angular, essa aula foi um tanto quanto complicada de acompanhar
Atualmente na versão 16 do framework, muita das coisas citadas na aula está completamente diferente
Claro o conceito é o mesmo e nada impede de pesquisar e olhar a documentação pra ver como é que faz agora
Contudo, mesmo funcionando ainda não ficou funcionando perfeitamente como o mostrando no vídeo
Funcionou de uma forma um tanto quanto "burr@" kkkkk
Obrigado loiane
Curso maravilhoso, só tenho a agradecer ❤
Código quase funcional abaixo:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filtroArray'
})
export class FiltroArrayPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (value.length === 0 || args === undefined) {
return value;
}
let filter = (args[0] as String).toLocaleLowerCase();
return value.filter((v:any) => v.toLocaleLowerCase().includes(filter));
}
}
Obrigado por compartilhar!
No Angular 8, meu método 'transform', aproveitando a dica nos comentários de Melvin Fernandes, ficou assim:
transform(value: any, ...args: any[]): any {
if ( value.length === 0 || args === undefined ) {
return value;
}
const filtro = (args[0] as String).toLowerCase();
return value.filter (
v => v.toLocaleLowerCase().includes(filtro)
);
}
e o código HTML usei assim:
{{ liv }}
... permitindo-me usar, inclusive, mais de um filtro.
Para quem teve problema com o input
Livros
teste
{{liv}}
No Angular 15:
@Pipe({
name: 'myPipe',
pure : false
})
funcionou para mim, para detectar as modificações passadas no método transform.
Quando eu faço o push() clicando no botão, o novo curso é inserido no array, mas não aparece na tela, apenas quando uso o filtro ele surge. Alguem tem alguma idéia do que possa estar ocorrendo?
Pessoal, desculpa responder minha própria pergunta.. Achei a resposta KKK. Pra fazer a alteração no DOM, eu adicionei o statement pure:false no @Pipe do pipe.ts, e importei no componente o ChangeDetectionStrategy, incluindo o changeDetection: ChangeDetectionStrategy.OnPush no @Component.
@@galahad280 Apenas coloquei o pure: false no meu e já funcionou redondinho... Vlw
@@galahad280 Agora sim o meu funcionou, valeu.
@@oscardias1808 Agora foi
No angular versao 13, na arrow function precisa tipar a variavel V
(v: string) => v.toLocaleLowerCase().indexOf(filter) != -1
Gratidão!
Para o angular 11 não se esquecer de colocar o FormsModule lá no app.module:
import {FormsModule} from '@angular/forms'
...
Imports: [
...
[FormsModule],
...
]
Saudades de você Loiane, obrigado por suas aulas!
Muito obrigado Loiane! Nota 10!
no angular 14 substitua on unknown por any e infira o tipo no return:
transform(value: any, ...args: any[]): any {
if(value.length === 0 || args === undefined){
return value;
}
let filter = args.toLocaleString().toLowerCase();
return value.filter(
(v:any) => v.toLocaleString().toLowerCase().indexOf(filter) != -1
);
}
Obrigado, ajudou bastante.
Parabéns e obrigada pelo curso!
Excelente! Parabéns!
Aeeee voltou...
Ficou muito confusa essa aula. Alguém sabe me dizer porque meu ngFor mostra "[object Object]" no lugar do nome da string? Sendo que a mesma está tipada como string no meu componennte "livros: string[] = ['Java', 'Ionic'];"
Compara o seu código com o da professora.
Repositório dos exemplos: github.com/loiane/curso-angular2
mais uma aula concluida
Apareceu, rsrsrsrs. Estava sumida...
foram 3 eventos na semana passada, tive que economizar a voz! rs :)
"Oi, sumida"
talvez alguem está com problema nas novas versão do angular que ele nao está atualizando o array de "livros" tenta fazer assim
addCurso(valor: string){
this.livros = [...this.livros, valor]
console.log(this.livros);
}
Oi Loiane parabéns pelo vídeos. Uma dúvida: no angular 1 podíamos realizar filtros de campos e objetos. Existe uma maneira mais recomendada de implementar este mesmo recurso ?? Obrigado
oi Gleyson, mostrei a forma correta de fazer isso no Angular 2 na aula 47.
Quando crio a lógica do pipe e tudo, os itens do array somem, alguém sabe o por quê?
Não se preocupem, acabei descobrindo que botei o pipe no elemento do array e não no array em si, deu certo.
@@Spadacci Meu ficou assim tbm ele some
Exemplos de Pipes
Título: {{ livro.titulo | uppercase | lowercase | camelCase}}
Estrelas: {{ livro.rating | number:'1.1-2'}}
Páginas: {{ livro.numeroPaginas }}
Preço: {{ livro.preco | currency:'BRL': true }}
Data Lançamento: {{ livro.dataLancamento | date }}
Url: {{ livro.url }}
Livro: {{ livro | json }}
Add curso
{{ liv }}
import { Component } from '@angular/core';
@Component({
selector: 'app-exemplos-pipes',
templateUrl: './exemplos-pipes.component.html',
styleUrls: ['./exemplos-pipes.component.css']
})
export class ExemplosPipesComponent {
livro: any = {
titulo: 'Estruturas de Dados e Algoritmos com JavaScript: Escreva um Código JavaScript Complexo e Eficaz Usando a Mais Recente ECMAScript ',
rating: 4.9,
numeroPaginas: 408,
preco: 93.65,
dataLancamento: new Date(2019, 2, 11),
url: 'a.co/d/5RzkYVu'
};
livros: string[] = ['livro1','livro2']
filtro:string;
addCurso(valor:string ) {
this.livros.push()
}
constructor () {
this.filtro = this.filtro = ''
}
}
Resolvi:
import { Pipe, PipeTransform, untracked } from '@angular/core';
@Pipe({
name: 'filtroArray'
})
export class FiltroArrayPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (value.length === 0 || args === undefined) {
return value;
}
let filter = args.toLocaleString().toLowerCase();
return value.filter(
(v:string) => v.toLocaleString().toLowerCase().indexOf(filter) != -1
);
}
}
Exemplos de Pipes
Título: {{ livro.titulo | uppercase | lowercase | camelCase}}
Estrelas: {{ livro.rating | number:'1.1-2'}}
Páginas: {{ livro.numeroPaginas }}
Preço: {{ livro.preco | currency:'BRL': true }}
Data Lançamento: {{ livro.dataLancamento | date }}
Url: {{ livro.url }}
Livro: {{ livro | json }}
Add curso
{{ liv }}
import { Component } from '@angular/core';
@Component({
selector: 'app-exemplos-pipes',
templateUrl: './exemplos-pipes.component.html',
styleUrls: ['./exemplos-pipes.component.css']
})
export class ExemplosPipesComponent {
livro: any = {
titulo: 'Estruturas de Dados e Algoritmos com JavaScript: Escreva um Código JavaScript Complexo e Eficaz Usando a Mais Recente ECMAScript ',
rating: 4.9,
numeroPaginas: 408,
preco: 93.65,
dataLancamento: new Date(2019, 2, 11),
url: 'a.co/d/5RzkYVu'
};
livros: string[] = ['livro1','livro2']
filtro:any;
addCurso(valor:string ) {
const novoValorSemEspacos = valor.replace(/^\s+/, '');
if (novoValorSemEspacos.match(/[a-zA-Z0-9]+/g)) {
this.livros.push(novoValorSemEspacos)
}
}
constructor () {
}
}
a partir da aula 46 - Pipes Puros obetenho o seguinte erro:
An unhandled exception occurred: Cannot find module 'D:\dev\javascript\cursoAngula2Loiane\pipes
ode_modules\webpack\lib\index.js'. Please verify that the package.json has a valid "main" entry
See "C:\Users\pedro\AppData\Local\Temp
g-WmWFlb\angular-errors.log" for further details.
[error] Error: Cannot find module 'D:\dev\javascript\cursoAngula2Loiane\pipes
ode_modules\webpack\lib\index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (internal/modules/cjs/loader.js:308:19)
at Function.Module._findPath (internal/modules/cjs/loader.js:521:18)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:872:27)
at Function.Module._load (internal/modules/cjs/loader.js:730:27)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (D:\dev\javascript\cursoAngula2Loiane\pipes
ode_modules\@angular-devkit\build-webpack\src\webpack\index.js:37:35)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
Alguem pode ajudar?
Alguém mais teve problemas com o input do filtro? Implementei aqui, de acordo com a aula, não recebo nenhum erro no console porém não o input não realiza a filtragem. Talvez algum novo import seja necessário, se alguém souber comenta aí porfavor.
no app.module.ts importe a biblioteca do FormsModule (--> import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Conseguiu fazer ai? Tentei aqui colocando o filter: 'le' e não tenho retorno algum e nem erros no console.
@@alanddos Mesma coisa comigo.
@@oplayboydoface cara eu consegui fazer mas demoro hein
@@oplayboydoface se te ajudar eu comecei por esse cód mas acabou ficando de lado o projeto é n melhorei ele import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'aulasFilter'})export class AulasFilterPipe implements PipeTransform { transform(aulas: any, args?: any): any { //se n tiver argumento o pipe retorna o valor como está if (aulas === '' || aulas === 'undefined' || !args) { return aulas;//Até aqui está tudo ok } if (args) { //console.log('Há argumentos pipe: ', args); aulas.forEach(aula => { let au = aulas.filter(aula => aula.descricao.toUpperCase().indexOf(args.toUpperCase()) !== -1); console.log(au) let instrutor = aulas.filter(aula => aula.instrutor_id.toUpperCase().indexOf(args.toUpperCase()) !== -1); if (au.length > instrutor.length) { aulas = au } else { aulas = instrutor } }); return aulas; } } }
Agora no Angular 18 é necessário fazer assim:
transform( cElemento: any, args?: String): any {
if ((cElemento.length === 0) || (args === undefined)) {
return cElemento;
};
let cFiltro = args.toLocaleString().toLocaleLowerCase();
return cElemento.filter((v: String) => v.toLocaleLowerCase().includes(cFiltro));
}
Puxa vida...
Aqui não rolou essa função...
A configuração da minha máquina é:
Angular CLI: 15.2.2
Node: 18.15.0
Package Manager: npm 9.6.1
OS: win32 ia32
Estava tomando erro toLocaleLowercase() is not a function from args...
Dei umas buscas no google e, aqui, funcionou da seguinte forma:
transform(value: any, ...args: any): any {
if(value.length === 0 || args === undefined){
return value;
}
let filter = String(args).toLowerCase();
return value.filter(
(v:string) => v.toLowerCase().indexOf(filter) != -1
);
}
Tb estava tomando erro de [(ngModel)] no input type do pipe. component.html
Busquei aqui e vi que precisamos importar a biblioteca FormsModule no appModule.ts, assim:
import { FormsModule } from '@angular/forms';
imports: [
[outras bibliotecas],
FormsModule
],
Com isso, funcionou!
show, obrigado!
Gratidão!