Component

Component
Attribute
- O decorador @Attribute é uma abordagem mais adequada para injetar valores que são estáticos e que são definidos no HTML do componente host. Esse método é mais eficiente para valores que não precisam de atualização após a criação do componente.
```
constructor(
    @Attribute("tipoService") public tipoService: string,
    private selectService: SelectService,
    private serviceFactory: ServiceInjectionFactory,
    private spinner: NgxSpinnerService,
  ) {
  
  }
```

Styling components

@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class ProfilePhoto { }

ViewEncapsulation.Emulado Por padrão, o Angular usa encapsulamento emulado para que os estilos de um componente se apliquem somente a elementos definidos no template desse componente. Nesse modo, o framework gera um atributo HTML exclusivo para cada instância do componente, adiciona esse atributo a elementos no template do componente e insere esse atributo nos seletores CSS definidos nos estilos do seu componente.

Este modo garante que os estilos de um componente não vazem e afetem outros componentes. No entanto, estilos globais definidos fora de um componente ainda podem afetar elementos dentro de um componente com encapsulamento emulado.

No modo emulado, o Angular suporta as pseudo classes :host e :host-context()sem usar Shadow DOM . Durante a compilação, o framework transforma essas pseudo classes em atributos, de modo que não cumpre com as regras dessas pseudo classes nativas em tempo de execução (por exemplo, compatibilidade com navegador, especificidade). O modo de encapsulamento emulado do Angular não suporta nenhuma outra pseudo classe relacionada ao Shadow DOM, como ::shadowou ::part.

::ng-deep O modo de encapsulamento emulado do Angular suporta uma pseudo classe personalizada, ::ng-deep. Aplicar essa pseudo classe a uma regra CSS desabilita o encapsulamento para essa regra, efetivamente transformando-a em um estilo global. A equipe do Angular desencoraja fortemente o novo uso de::ng-deep . Essas APIs permanecem exclusivamente para compatibilidade com versões anteriores.

ViewEncapsulation.ShadowDom Este modo faz o escopo de estilos dentro de um componente usando a API Shadow DOM padrão da web . Ao habilitar este modo, o Angular anexa uma shadow root ao elemento host do componente e renderiza o template e os estilos do componente na shadow tree correspondente.

Este modo garante estritamente que somente os estilos daquele componente se apliquem aos elementos no template do componente. Estilos globais não podem afetar elementos em uma shadow tree e estilos dentro da shadow tree não podem afetar elementos fora daquela shadow tree.

Habilitar ShadowDomo encapsulamento, no entanto, impacta mais do que o escopo de estilo. Renderizar o componente em uma shadow tree afeta a propagação de eventos, a interação com a <slot>API e como as ferramentas de desenvolvedor do navegador mostram elementos. Sempre entenda todas as implicações do uso do Shadow DOM em seu aplicativo antes de habilitar esta opção.

ViewEncapsulation.Nenhum Este modo desabilita todo o encapsulamento de estilo para o componente. Quaisquer estilos associados ao componente se comportam como estilos globais.

Styling components​

Styling components