Angular

NG Client

Criando projeto

ng new [project name]

Cirar projeto com as rotas

ng new [project name] --routing --defaults

• Componentes
• Diretivas
• Serviços
• Módulos

Componentes

Novo componente

ng g c [/modules/brapci/headers/head]

Route - Routas

ng generate module app-routing --flat --module=app

Nova Inteface

ng g interface /modules/interface/vocabulary

Data Binding

Interpolation (sem espaços)

{ { title } } (HTML)
public title: string="Título" (TS)

Property Binding

<button [disabled]="disableButton">Botão</button> (HTML)
<img [src]="imageCapaURL"> (HTML)
<img src="Predefinição:ImageCapaURL"> (HTML)

Event Binding

<button (click)="calc()">Calcular</button> (HTML)
<button (click)="calc($event)">Calcular</button> (HTML)
public calc(valor: MouseEvent) { (TS)
  console.log(valor) }

Two-way binding

<input ngModel="nome"> (HTML)
Predefinição:Nome (HTML)
public nome="Nome" (TS)

Services

ng g s data/isbn

• Incluir no app.component (Http)

Formulários

• Angular:Formulários

Ciclo de Vida

• Angular:Ciclo de Vida

Cookie

npm install ngx-cookie-service

 public ngOnInit(): void
   {
     if (this.CookieService.check('library'))
       {
         this.CookieService.set('library','1');
         console.log(this.CookieService.getAll());
       } else {

       }
   }

Bootstrap Angular

ng add @ng-bootstrap/ng-bootstrap

npm install bootstrap bootstrap-icons
/* Editar o arquivoi angular.json */
"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

npm install @ng-bootstrap/ng-bootstrap

Variáveis

public title:string = "Brapci";
public valor:number = 1;
public valido:boolean = true;
public position: { x: number, y: number } = { x: 0, y: 0 };

====Array====

public list: Array<{ nome: string, idade: number}> = [

 { nome: "Rene", idade: 53 },
 { nome: "Viviade", idade: 52 },
];

Insere um tiem em uma array

this.list.push({nome: "Nome", idade: 31 });

Remove um item de uma array

this.list.splice(id)

Funções

• Angular:Funções

Rodando servidor

ng s