CRUD Angular + Spring | 06 - Criando Material Table para Listar Cursos

Para quem estiver com o mesmo problema que tive, do dataResource no arquivo HTML não reconhecer 'courses', a solução para mim foi: - Abra o arquivo 'courses.module.ts' e em 'imports', acrescente: 'MatTableModule', importando de: 'import { MatTableModule } from '@angular/material/table'; Espero ter ajudado! =) Obs.: na luta para ser igual a Loiane maravilhosa!

[@pedrosss2336]

Ajudou, obrigado!

[@flavio_ever]

Nao se esquecendo de adicionar tambem em "declarations" o CoursesComponent.

[@umamentepelomundo]

Deixando meu comentário para impulsionar o engajamento e ajudar esse conteúdo maravilhoso a alcançar mais pessoas da área. Já estou na aula 34 e estou adorando! Recomendo a todos que aproveitem essa oportunidade incrível de aprendizado. Parabéns pelo trabalho excepcional!

[@FabianoQueirozMonte]

A fada madrinha do Angular em pr-br

[@JoaoFelipeSilvaLamounier]

galerinha do angular 17, que tiveram problema com: [dataSource]="courses". Em courses .components.ts adicione o import -> import { MatTableModule } from '@angular/material/table'; e no @Component -> imports: [MatTableModule],

[@williamcarvalhoCoelho]

salvou demaisssss

[@B2inPlayCode]

Brabo demais. Salvou

[@Ramirozavala]

Obrigado man !

[@Garimpador-yd6rd]

Valeu man ajudou pakas

[@JuniorAC90]

Muito obrigado!

[@corsana-black5105]

Estou amando sua didática, quem dera que todos tivessem essa didática e altruísmo em ajudar o próximo como você esta fazendo ao compartilhar seu conhecimento saiba que está não só ajudando mas mudando a vida de milhares que se tornam milhões quando aplicam o que aprendem com você, obrigado de Coração por fazer parte de meu aprendizado.

[@ber_dev_2099]

Excelente aula e didática. Obrigado!

[@luc45k]

Professora, seu curso é maravilhoso! Obrigado por compartilhar seu conhecimento conosco!

[@ThaMuthaphukkinReal]

Que didática incrível! Muito obrigado Loiane por compartilhar esse conteúdo e conhecimento!!!

[@carlosbriceno9871]

What an amazing class! This is a masterpiece. The level of detail and explanation is incredible. Definitely one of the best Angular teachers I've ever seen.

[@pamelamachado3752]

Obrigada por disponibilizar tanto conteúdo de qualidade! Você é uma profissional incrível, me inspiro demais no seu trabalho.

[@rique-felix]

Parabéns Loiane, eu também tenho esses toks.

[@rodrigos1380]

No arquivo courses.component.ts (19:04), consta implements OnInit, o constructor e o ngOnInit, no entando, o terminal (ng g c courses/courses) gerou um arquivo sem esses métodos. Na primeira tentativa a minha lista não apareceu, dps refiz todo o código e acho que deixei de fazer algum import para tal lista aparecer. Funcionou, no entanto não usei todo esse código em courses.component.ts.

[@rodrigos1380]

Depois tenho que tirar um tempo para entender melhor o source control no vscode, para por exemplo restaurar todos os meus arquivos do dia anterior... no terminal faço um git commit -m "", dps dou um push e depois se tiver algum erro é só baixar os arquivos no github? Teria algo mais prático? Acabei me atrapalhando todo... acho que não fiz os commits e no final das contas fiquei mais perdido que cego em tiroteio tentando encontrar a razão da tabela não aparecer no localhost.

[@augustomoreira7403]

Mais uma bela aula, de uma bela professora com sua bela e singela inteligência.

[@otaviowill]

Maratonei as 6 aulas... Didática sem igual! Parabéns Loiane pelo trabalho bem feito. Ganhou mais um inscrito... 👏🏻👏🏻👏🏻😍

[@PabloRodriguez-br9xg]

Que aulas incriveis! Estou aprendendo muito Loiane! Aguardando as próximas aulas!!! 🙏🙌 muito obrigado Loiane!!!🙏🙌👏👏👏

[@robertabononidasilva3263]

Loiane, que didática maravilhosa!

[@odairto]

Que didática, que domínio! Você é demais Loiane!. Muito obrigado!

[@iannbraga9280]

Playlist maravilhosa!!! Adorei sua voz!!

[@gustavocaixeta42]

2 aulas na semana pfv Loiane! 😭 To amando demais

[@aln_soares]

Só videos bons ! Sempre atual.

[@nathanaelsouls]

Que didática incrível, ficou ótimo Loiane, obrigado por compartilhar seus conhecimentos!

[@Rodrigoodc1]

Muito boa aula, a cada aula aprendo uma coisa nova e entendo como é feita a ligação dos componentes. obrigado :D

[@ignoranciaaudaciosa]

ATENÇÃO!! Para quem estiver usando o angular 17 e estiver encontrando o erro NG8002: Can't bind to 'dataSource' since it isn't a known property of 'table'. Basta declarar o import { MatTableModule } from '@angular/material/table';import { MatTableModule } from '@angular/material/table'; direto no courses.components.ts

[@hotelbrh8418]

Boa noite ! Muito top !!

[@leonardosoares6397]

Que foda essa aula, estou aprendendo muito sobre Angular e estou apaixonado com Material!

[@steliofranciscomatsinhe5138]

Incrível. Gratidão.

[@hugoleonardo3758]

Muito top as aulas, seria possível ao final demonstrar como podemos criar dois temas e deixar para o usuário escolher.

[@devidyoliveira1632]

Que conteúdo incrível! Tudo muito explicado e com uma ótica didática. Parabéns e muito obrigadoooooooooooooooooooooooo

[@jorgelacerda5338]

Boa tarde, Loiane. Parabéns pela iniciativa de esmiuçar uma tecnologia que tem tanto a ofertar. Por outro lado, estou com um problema e não consigo resolvê-lo, qual seja: Can't bind to 'dataSource' since it isn't a known property of 'table'. Ele não consegue identificar o dataSource na mat table. Fiz igual à sua instrução. Já deixo meu agradecimento pela atenção.

[@loianegroner]

Oie, verifique se importou o módulo do MatTable.

[@jorgelacerda5338]

@@loianegroner Loiane, muito obrigado pelo retorno. Consegui identificar que não tinha criado o exports do módulo. Estou muito feliz por tê-la encontrado. Novamente, obrigado pela iniciativa de compartilhar seu conhecimento, pois, dessa forma, você gera muito valor e muda vidas. Grande abraço.

[@vivianb.r6539]

Maravilhosa, muito boa a aula, estou fazendo junto toda semana.

[@pauloramos4694]

Depois de seguir seus passos meu projeto compilou certinho, porém a lista não apareceu. Depois de passar um pente fino percebi que coloquei a tag "" no component errado, fica a dica pra quem estiver com o mesmo problema 🙏

[@victoricoma9579]

Pessoal meu código está dando esta mensagem aqui: Can't bind to 'dataSource' since it isn't a known property of 'table'. já verifiquei se a importação da tabela está no módulo que está o componente e está identico ao da Loiane alguém tem uma luz.

[@sonhos_sombrios]

Bom dia, me bati um pouco nesse erro e só depois que entendi, essa importação deve ser feita no module do component Courses, e não no app.module

[@JeremiasCB]

@@sonhos_sombrios isso, no vídeo é cortado essa parte que ela corrige.. faltou anotar essa observação no vídeo.

[@Ramirozavala]

No min 20:21... até aqui tudo igual e sem erros, mas quando executo com NG SERVE, só mostra o título da pagina ""Crud : Angular + Spring", mas não mostra os cabeçalhos da tabela "Curso Categoria" :(

[@larissamartins6348]

Maravilhosa! Muitissimo obrigada!

[@marcelops11]

Você á a melhor!!!!!

[@JoaoMiguel-mw1rm]

Muito bom, obrigado!

[@pedrolobo9835]

Muito bom, como sempre!

[@samuelfizvendas]

vamos avançando #maratonaAngular

[@joaoantunesguimaraes]

O Intelissence não me faz o Auto-complete ao escrever "courses" no lugar do DataSource.

[@anthonymeds4440]

Qual o tema do vsCode ela usa ? e a extensão dos ícones Angular, ts ?

[@MauricioDeLima1001]

Obrigado professoraaaa...

[@lucasfranciscopaixaodegois9247]

show!

[@danilo_teixeira]

Curso sensacional!! Parabéns!! Uma dúvida, como deixar as chaves do HMTL coloridas?

[@loianegroner]

Oie, é o tema que uso, One Dark, pro VSCode.

[@tomaslima2207]

você é muito foda.

[@MLOM2010]

Oi Mestra, instalei a sua extensão, mas o intellisense não está apresentando a sugestão para o '[dataSource]". Tem ideia do que fiz de errado?

[@diegoalves7986]

Boa tarde, estou tentando faz alguns dias criar uma tabela utilizando o material, porém, recebo mensagem de erro do componente HTML informando que dataSource não é uma propriedade conhecida de table. O MatTableModule está importando no appModule e mesmo assim, não resolve o problema. Alguém tem alguma idéia de como resolver ?

[@loianegroner]

Você está usando um outro módulo onde o seu componente foi criado? O import precisa ser no módulo no qual seu componente foi criado.

[@diegoalves7986]

@@loianegroner olá Loiane, tô iniciando nos estudos e comi bola. Eu crie um componente dentro de um outro componente e por enquanto, estou declarando no app.module. Porém, eu esqueci de declarar, depois disso, funcionou. Obrigado.

[@BrunoHenrique-vd1ry]

Pessoal, boa tarde! Estou utilizando a versão mais atualizada do angular, no meu caso a 17 e estava tendo problemas com o import da table do angular material. Acontece que aparentemente na versão mais atual, me corrijam se eu estiver errado, a equipe do angular quer que os componentes trabalhem de maneira mais isolada, o que faz com o que imports feitos em outras camadas como app e module, não funcionem. Desta forma, tentem importar na camada de componente, deve funcionar.

[@luccakazlauskaszaccaria2734]

Loiane, gostaria de agradecer por todo conteúdo que você já disponibilizou para nós. Acredito que tenha ajudado muita gente. Gostaria de tirar uma dúvida, o código do seu git, está mais adiantado do que o curso, certo ?

[@tronyn]

Estou com um problema em exibir a tabela, achei que fosse um problema de rotas, mas fiz um teste dentro de courses.component.html, e coloquei um h1 com a palavra teste e o mesmo apareceu dentro do site mas a tabela não alguém sabe o porque de ocorrer isso ?

[@theturborokusho]

Fiz todo o passo a passo, mas a tabela nao aparece no index

[@ENLAY]

O meu esta assim tambem, voce conseguiu resolver?

[@hamienosrocha3076]

Olá, tudo baum? Você acha uma boa ideia trabalhar com o padrão Facade com aplicações Angular?

[@loianegroner]

Depende muito do cenário. Até hoje nos projetos que participei não tive necessidade.

[@hamienosrocha3076]

@@loianegroner Obrigado ♥

[@marciovelasco8106]

Excelente aula. Parabéns. Queria saber se futuramente teria um curso semelhante de PWA? Esse projeto poderia se transformado em uma PWA? O Angular é um bom framework para uma PWA?

[@loianegroner]

Dá pra transformar sim. O angular tem um pacote específico pra isso!

[@bartoalheiros3616]

O meu VSCode não fica com essas miniaturas bonitinhas. Quando a Loiane criou a pasta model, ficou com o símbolo de 'dados' e os outros arquivos tem suas respectivas logos. Alguém sabe como faço isso no VSCode?

[@bomdias7110]

material icons extension

[@bartoalheiros3616]

@@bomdias7110 obrigado, funcionou!

[@Tuliogomes98]

Ola ja existe a continuação dessa aula para finalizar a tabela?

[@loianegroner]

Aulas novas toda segunda-feira!

[@mugatu2017]

normally i use the concept of smart and dumb component, higher order components are smart and they deal with data sources, those components pass down the data to be rendered by presentational components

[@wesleyluiz6501]

pra mim não aparece o ts hero tenho que instalar alguma extensão ?

[@loianegroner]

Sim! Procure por Loiane, tem pacote com todas as extensões que uso.

[@victornogueira6420]

Boa tarde Loiane, estou fazendo com produtos. Você tipou string em nome, mas como estou fazendo de produtos, quero tipar o preço, qual variável eu uso pra definir preço? Não tem bigdecimal como tem em java!

[@loianegroner]

oie, seria number, que representa tanto inteiros quanto decimais. No Java vc pode até usar BidDecimal como tipo, que o Spring consegue fazer a conversão.

[@lucasparaguassu9200]

Mano, importei o mat-table no "AppMaterialModule" da pasta shared pois vou usar a tabela em mais outros componentes aqui no meu projeto. Exportei a table lá, importei o appmaterialmodule no meu componente e ele diz que "datasource" não é reconhecido. Help please.

[@lucasparaguassu9200]

já importei o mattable direto no componente que quero usar, sem ser pelo shared, e continua dando a mesma coisa

[@wemersonalmeida9290]

top

[@luizbordoni6891]

Estou com o seguinte erro no uso do Mat-Table: core.js:6479 ERROR Error: Uncaught (in promise): Error: 'MatTable' is neither 'ComponentType' or 'DirectiveType'. Alguém tem uma dica?

[@felipemacedocomputacao]

estou um pouco confuso. A aplicação usa o Angular Material (material.angular.io) ou Material Design (material.io)?

[@LuisFelipe-oi3rm]

na parte do DataSource, está dando um erro no template, alguém teve esse problema?

[@almirjunior382]

coloquei esse import no app.module, pra mim resolveu, mas vi que para versões mais novas, acho que deve ser colocado no modulo do componente. import { MatTableModule } from 'ARROBAangular/material/table'

[@bartoalheiros3616]

A minha tabela já preencheu todo o espaço da tela... Não sei o que foi, hehehe.

[@orochasamuel]

Vim buscar cobre e encontrei foi ouro. (y)

[@gabrielcastilho7129]

Opa

[@alyssonsousa6209]

oi acho que fiz alguma coisa errada não tem o teste unitário import { Component } from '@angular/core'; @Component({ selector: 'app-courses', templateUrl: './courses.component.html', styleUrls: ['./courses.component.scss'] }) export class CoursesComponent { }