<div class="pensamento {{ pensamento.modelo }} ff-roboto-mono pensamento-p">
<img src="../../../../assets/imagens/{{ pensamento.modelo }}.png" alt="Aspas coloridas">
<p class="conteudo">{{ pensamento.conteudo }}</p>
<p class="autoria"><b>{{ pensamento.autoria }}</b></p>
<div class="acoes">
<button class="botao-editar">
<img src="../../../../assets/imagens/icone-editar.png" alt="icone de editar">
</button>
<button class="botao-excluir">
<img src="../../../../assets/imagens/icone-excluir.png" alt="icone de editar">
</button>
</div>
</div>
<section class="container">
<header class="header d-flex">
<h2 class="ff-inter">Meu Mural</h2>
<button routerLink="/criarPensamento" class="botao">Adicionar Pensamento</button>
</header>
<div class="mural" *ngIf="listaPensamentos.length > 0, else semPensamentos">
<div *ngFor="let pensamento of listaPensamentos">
<app-pensamento [pensamento]="pensamento"></app-pensamento>
</div>
</div>
</section>
<<ng-template #semPensamentos>
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados</p>
</div>
</ng-template>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-listar-penamento',
templateUrl: './listar-pensamento.component.html',
styleUrls: ['./listar-pensamento.component.css']
})
export class ListarPenamentoComponent implements OnInit {
listaPensamentos = [
{
conteudo: 'A persistência é o caminho do êxito.',
autoria: 'Charles Chaplin',
modelo: 'modelo3'
},
{
conteudo: 'Deus é o nosso refúgio e fortaleza, socorro bem presente na angústia.',
autoria: 'Salmos 46:1',
modelo: 'Modelo2'
},
{
conteudo: 'Tudo o que um sonho precisa para ser realizado é alguém que acredite que ele possa ser realizado.',
autoria: 'Roberto Shinyashiki',
modelo: 'Modelo1'
}
];
constructor() { }
ngOnInit(): void {
}
}
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-pensamento',
templateUrl: './pensamento.component.html',
styleUrls: ['./pensamento.component.css']
})
export class PensamentoComponent implements OnInit {
@Input() pensamento = {
conteudo: 'A persistência é o caminho do êxito.',
autoria: 'Charles Chaplin',
modelo: 'modelo3'
}
constructor() { }
ngOnInit(): void {
}
}