Olá pessoal, tudo bem? Criei o componente de form-busca da mesma forma que foi criado na vídeo aula. Mas quando eu importei ele na página Home, o formulário fica invisível e só ele não aparece, os demais componentes aparecem de boa. O html de form-busca ficou assim:
<app-card variant="secondary" class="form-busca">
<form>
<h2>Passagens</h2>
<div class="flex-container">
<mat-button-toggle-group aria-label="Tipo de passagem">
<mat-button-toggle>
<mat-icon>check</mat-icon>
IDA E VOLTA
</mat-button-toggle>
<mat-button-toggle>SOMENTE IDA</mat-button-toggle>
</mat-button-toggle-group>
<mat-chip-listbox aria-label="Seleção de passagens">
<mat-chip-option selected>1 Adulto</mat-chip-option>
<mat-chip-option>Econômica</mat-chip-option>
</mat-chip-listbox>
</div>
</form>
</app-card>
Seu scss está dessa forma:
.form-busca {
margin: 40px 0;
display: block;
.flex-container {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.input-container {
margin-bottom: -1.25em;
}
.mat-button-toggle-checked {
background-color: #F7F2FA;
}
h2 {
font-size: 32px;
margin-bottom: 20px;
}
}
E o home.container.html está dessa forma:
<section class="homepage">
<app-banner src="assets/imagens/banner-homepage.png" alt="Banner da aplicação Jornada"></app-banner>
<app-container>
<h2>Promoções</h2>
<app-form-busca></app-form-busca>
<div class="card-wrapper">
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
<app-card-busca></app-card-busca>
</div>
<h2>Depoimentos</h2>
<div class="card-wrapper">
<app-card-depoimento></app-card-depoimento>
<app-card-depoimento></app-card-depoimento>
<app-card-depoimento></app-card-depoimento>
</div>
</app-container>
</section>
Alguém faz ideia do que isso pode ser?
