O angular é um framework open source de javascript que usa componentes e directivas para construir uma aplicação web. É construido inteiramente em typescript e foi desenvolvido para trabalhar com SPAs (single page applications) em ambientes multiplataforma (web, desktop e mobile). É mantido pelo Google.

Single pages applications são aplicações que carregam somente uma vez e as interações do usuário não farão a página ser carregada.

Ele adiciona interatividade para as páginas web, trazendo estrutura, consistência, escalabilidade e manutenibilidade.

• Document Object Model (DOM)
• Typescript
• Data binding
• Testing

Trata um documento html como se fosse uma árvore de nódulos que representa objetos do documento.

Cada vez que tem uma alteração no html o seu DOM será atualizado pois a estrutura de nódulos correspondente aquele html deverá ser atualizado.

A arquitetura do Angular é conhecida como MVVM: Model - View - ViewModel permitindo que a view e os componentes possam ser separados da lógica de negócio, ficando por responsabilidade da ViewModel que atua nas informações dos modelos e envia as informações para serem renderizadas pela View.

São como peças de legos que ao juntar formam uma aplicação web.

• Somente uma instância por DOM (Document Object Model)
• Adicionam comportamentos na DOM
• Suporta o uso de Views (templates)

Onde é especificado a listagem de componentes que devem ser compilados quando um modulo for definido. Os componentes listados aqui podem ser carregados dinamicamente na view.

A injeção de dependências é realizada nos providers, que aceita um array de valores, tornando o código flexível e desacoplado, separando responsabilidade de classe / objeto, definindo pela injeção as dependências daquela classe.

Property

As propriedades de um elemento HTML podem ter seus valores alterados pelo binding.

<input [value]="'Some value'" type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

let text = "Some awesome text"; 
<p [innerText] = "text"></p>

<table>
	<tr>
		<td [attr.aria-label] = "name">
		</td>
	</tr>
</table>

Event

Também podemos chamar funções ou alterar valores de variáveis utilizando os [eventos javascript](https://www.marciobrasil.net.br/javascript-2/lista-completa-de-eventos-javascript.html).

let buttonText = "Not clicked!";

someMethod(buttonText) {
	console.log("Button was clicked and this value changed to ");
	console.log(buttonText);
}

<button (click) = "someMethod(buttonText = 'Clicked!')">{{buttonText}}</button>

<button [style.color] = "isValid ? 'green' : 'red'"> (click)="isValid" = !isValid">Click here</button>

NgModel

É um fluxo bidirecional, atualizando o valor dinâmicamente pelo disparo de eventos.

<input [ngModel]="valor" (ngModelChange)="valorMaiusculo($event)" id="exemplo-maiusculo">

• Múltiplas instâncias por DOM
• Não suporta Views

É uma feature experimental do Typescript, serve para definir classes e propriedades do Angular, no qual uma classe pode ser definida como modulo, componente, service, pipe ou directive pelo decorator atribuído a esta.

Ex. @NgModule, @Component, @Pipe, @Directive, @Injectable (service)…

O angular tem um um sistema modular chamado de engenharia de módulos (@NgModules) onde uma aplicação em angular tem pelo menos um modulo que é o AppModule.

Os módulos é uma ótima forma de organizar a aplicação e extender sua utilização, sendo que muitas libs do angular são módulos como FormModule, RouterModule… como também libs externas vistos no AngularMaterial, Ionic…

Usado para registrar um componente, pipe ou directiva no angular module.

Um componente só pode estar registrado dentro de um módulo.

changes in angular: timeout, intervals, button clicks, select value change, input keybords, api calls…

Utilizado para obter elementos por referencia.

Pega um elemento por referência da view via component type ou template.

//OneComponent
export class OneComponent {
	@input() name: string;
	private lastname: string;

	message() {
		console.log("OneComponent: hello!");
	}
}

//app.component.html
<one-component name="{{ name }}"></one-component> //*1
<one-component #oneComponent name="{{ name }}"></one-component> //*2

//app.component.ts
import { OneComponent } from './one-component.component';

export class AppComponent implements AfterViewInit {
	name = 'Angular';
	
	//*1 pega informação do component filho existente no template deste componente
	@ViewChild(OneComponent) oneComponent: OneComponent;

	//*2 pega informação pelo apelido do component #oneComponent
	@ViewChild(oneComponent) oneComponentByNickname: OneComponent;

	//*3 pega informação pelo apelido do component #oneComponent lendo o View Container Ref
	@ViewChild("oneComponent"), { read: ViewContainerRef } ) oneComponentByNicknameVCRef: ViewContainerRef;

	//*4 pega informação pelo apelido do component #oneComponent lendo o View Container Ref
	@ViewChild(oneComponent, { read: TemplateRef } ) oneComponentByNicknameTemplateRef: TemplateRef<HTMLElement>;

	ngAfterViewInit() {
		console.log('oneComponent: ', this.oneComponent);
		console.log('oneComponentByNickname: ', this.oneComponentByNickname);
		console.log('oneComponentByNicknameVCRef: ', this.oneComponentByNicknameVCRef);
		console.log('oneComponentByNicknameTemplateRef: ', this.oneComponentByNicknameTemplateRef);
	}
}

https://www.youtube.com/watch?v=iZ1mlcCkY8A