cmail-card

cmail-card.component.html

<h3>{{cabecalho}}</h3>
<p>
    {{corpo}}
</p>
<h5>{{rodape}}</h5>

cmail-card.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'cmail-card',
  templateUrl: './cmail-card.component.html',
  styles: [
  ]
})
export class CmailCardComponent implements OnInit {
  @Input()
  cabecalho = '';

  @Input()
  corpo = '';

  @Input()
  rodape = '';

  constructor() { }

  ngOnInit(): void {
  }

}

login.component.html

<p>login works!</p>

<cmail-card [cabecalho]="aluno1.nome" [corpo]="aluno1.cargo" [rodape]="aluno1.disciplina">
</cmail-card>

<hr>

<cmail-card [cabecalho]="aluno2.nome" [corpo]="aluno2.cargo" [rodape]="aluno2.disciplina">
</cmail-card>

<hr>

<cmail-card [cabecalho]="aluno3.nome">
</cmail-card>

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  aluno1 = {
    nome: "João",
    cargo: "Estudante",
    disciplina: "Fisica"
  }

  aluno2 = {
    nome: "Carlos",
    cargo: "Professor",
    disciplina: "Engenharia"
  }

  aluno3 = {
    nome: "Raul"
  }

  constructor() { }

  ngOnInit(): void {
  }

}