Angular 7 - Componentes - Intermediário

README.md

Prefixo de componentes e Tslint

O TSLint é uma ferramenta de análise estática extensível que verifica o código TypeScript quanto a erros de legibilidade, manutenção e funcionalidade. É amplamente suportado por editores modernos e sistemas de construção e pode ser personalizado com suas próprias regras, configurações e formatadores de fiapos.

• CoC ou Convention Over Convention
• Podemos definir convenções obrigatórios ao nosso app. Ex: Obrigar nome do selector ter o prefito app- na frente.

  @Component({
    selector:    'app-hero-list',
    templateUrl: './hero-list.component.html',
    providers:  [ HeroService ]
  })
  export class HeroListComponent implements OnInit {
  /* . . . */
  }
  

Criando componente genérico para o modal

• Criando componente simplificado

  ng g component ./components/Modal --inline-template --inline-styles
  

ng-content targeted

Dividir um component em vários ng-contents, específicos.

• Reference https://blog.angular-university.io/angular-ng-content/
• Propriedade select=""

  <div>
    <ng-content select="div"></ng-content>
  </div>
  <div>
    <ng-content select="outra-div"></ng-content>
  </div>
  

ng-content targeted no component modal

• No compomente genérico 'Modal', podemos usar targets como atributo na view, capturados por webcomponents na view.

  <div class="modal" tabindex="-a" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-header">
        <ng-content select="[modal-title]"></ng-content>  
        <button class="close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <ng-content select="[modal-body]"></ng-content>
      <ng-content select="[modal-footer]"></ng-content>
    </div>
  </div>
  

• Na view podemos colocar as tags necessárias ao recurso do bootstap(no exemplo) e o cmpoment ira arrumar

  <modal>
    <h5 class="modal-title" modal-title>Novo Empregado</h5>
    <div class="modal-body">
      <form></form>
    </div>
    <div class="modal-footer">
      <button>Incluir</button>
    </div>
  </modal>
  

Conceito de ciclo de vida de componentes

• constructor mais indicado para iniciar propriedades do sistema.
• ngOnInint quando o componente é criado. Implementado com assinatura da Interface OnInit do @angular/core

Usando ngOnInit no componente modal

• Incluir classes no elementos em tempo de execução, obedecento cycleLife, ao criar um Component

import {ElementRef,OnInit} from '@angular/core'

ngComponent({
  selector:'modal',
  template: `<div class="modal"></div>`    
})
export class Modal implements OnInit{
  contructor(element: ElementRef){}

  onNgInit(){
    const modalElementDOM = this.element.nativeElement;
    modalElementDOM.querySelector('[modal-body]').classList.add('modal-body')
  }
}

Abstraindo comportamentos com herança

• Criar uma classe(Modalble) de maior nível que modal e serializa-lo
• Extender na classe modal a classe Modalble que irá combinar todos os métodos comuns a um modal

Eventos abre e fecha com modal

Abstraindo Eventos de fechar e abrir o modal

Entendendo definição de estilos na aplicação Angular

• Alterar definição de estilo padrão (css,scss, sass e etc).

  ng config schematics.#schematics/angular:components.styleext scss
  

• O comando acima implicará no angular.json. E novos components virão com scss e nao ccss