Angular - Up and Running ( O-Reilly ).txt

Angular - Up and Running ( O-Reilly )
-------------------------------------

https://www.tutorialspoint.com/angular8/index.htm

# What´s new between versions 2 and 17 
https://www.calibraint.com/blog/the-evolution-of-angular-versions

# Introdução ao Angular 17
https://consolelog.com.br/introducao-ao-angular-17/

1. Configurando o ambiente de desenvolvimento
---------------------------------------------

    . Instalação do Nodejs

        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | $SHELL
        nvm --version

        # Para instalar a versão lts mais recente
        nvm install --lts

        # Se quiser instalar uma versão especifica, utilize:
        # nvm install 18.20.4

        # Se quiser listar as versões do node disponivel no repositorio remoto
        # nvm ls-remote

        # Se quiser listar as versões instalada na máquina atual
        # nvm ls

        # Para usar uma versão instalada na máquina atual
        # nvm use 20.17.0

        # Para desinstalar uma versão do node js
        # nvm uninstall 18.20.4

        node -v
        npm -v

    . Instalação do VSCode:

        . Acessar a pagina de download da microsoft:

            https://code.visualstudio.com/download

        . Baixar o arquivo .deb 

        . Abrir o terminal e acessar a pasta Downloads

        . Executar o comando abaixo:

            sudo dpkg -i code_1.37.1-1565886362_amd64.deb

        . Atalhos

            Alt + 1, 2, 3, 4, ...	Posiona na aba no.
            Ctrl + b				Ativar o menu lateral esquerdo 
            Ctrl + Alt + P			Para ativar a linha de comandos 
            Ctrl + P 				Localiza um determinado arquivo
            Ctrl + W				Fecha a aba corrente
            Ctrl + Shift + W		Fecha todas as abas abertas

            Ctrl + Rolagem do Mouse	
                    sobre as abas 
                    abertas			Faz a rolagem das abas.

            Ctrl + K + C ou 
            Ctrl + /				Comenta linha atual, ou bloco selecionado

            Ctrl + K + U ou
            Ctrl + /				Descomenta linha, ou bloco selecionado.

            Ctrl + Shift + 
                    Acento Agudo	Abre o terminal na parte inferior

            Ctrl + X				Apaga linha
            Ctrl + H				Localiza e atualiza uma expressão
            Ctrl + F2				Selecione um texto e pressionando Ctrl + F2 
                                    muda todos os textos equivalente a medida
                                    que vai se digitando
            Alt + Arrow(up/Down)    Move a linha para cima, ou para baixo.
            Ctrl + Shift + O		Abre a lista de funções/métodos da classe atual
            Ctrl + G				Posicionar na linha No. que for digitado
            Alt + Backspace			Apaga palavra inteira a esquerda
            Ctrl + Shift + .		Mostra os métodos da classe
            Ctrl + Shift + L		Altera dinamicamente em todo o arquivo a palavra que está sendo alterada
            Ctrl + M				Para cercar um conjunto de tags numa página HTML ( Precisa de configurar, verifique como fazer em "Configurações" logo abaixo)
            cTRL + Ctrl + -			Para apagar uma tag que abraça um conjunto de tags HTML ( Precisa de configurar, verifique como fazer em "Configurações" logo abaixo)

        . Instale as seguinte Extensões:

            . Angular Extension Pack
            . Material Icon

        . Configurações:

            . Digite Ctrl K+S, localize o item "Delete Line" e configure Ctrl + D
            . Acesse View / Minimap para retirar o scroll de código da direita
            . Acessar configurações, ir em "Settings", Text editors, Sugestions:
                . Na opção "Accept Suggestion On Enter" deixar como off
                . Na opção "Suggest: Insert Mode" deixar como replace
                . Na opção "Quick Suggestions Delay" deixar como 1000
            . Acesse "Keyboard Shortcuts" em configurações:
                . Digite "Emmet: Wrap..." e altere o "Keybinding" para "Alt + M"
                    . De agora em diante, ao editar uma página HTML e quiser cercar um bloco de tags com uma outra, 
                        basta:
                        . Selecionar o bloco
                        . Digitar "Alt + M"
                        . Informar a tag que deseja colocar, somente a identificação sem "<>", por exemplo: "div"
                . Digite "Emmet: Remove Tag" e altere o "Keybinding" para "Alt+Shift+-", o "-" deve ser do bloco numerico
                    . De agora em diante, se precisar apagar uma tag HTML que cerca um conjunto de outras tags, basta posicioinar
                        o cursor sobre a "TAg" que deseja apagar e pressionar "Ctrl+Shift+-"
            . Digite "Ctrl+Shift+P" e digite "Preference: Open User Settings (JSON)"
                . Digite a configuração abaixo:

                    ...
                    "editor.linkedEditing": true,
                    "html.format.unformatted": "input",
                    "workbench.tree.indent": 20,
                    "workbench.tree.renderIndentGuides": "always",
                    "workbench.colorCustomizations": {
                        "tree.indentGuidesStroke": "#c8e0be"
                    }
            . Acesse Configurações -> Profile -> Import Profile 
                . Informe o link "https://vscode.dev/profile/github/12bd0215e34ffe344361b7dcf767842b" para resgatar as configurações para desenvolvimento em .NET

    . Instalação do JSon Server

        # Instalação do JSon Server global use -g, sem esse parâmetro o start do json-server será pelo comando "npx"
        npm install json-server -g

        # Crie o arquivo json abaixo com o nome de db.json
        {
            "posts": [
                { "id": "1", "title": "a title", "views": 100 },
                { "id": "2", "title": "another title", "views": 200 }
            ],
            "comments": [
                { "id": "1", "text": "a comment about post 1", "postId": "1" },
                { "id": "2", "text": "another comment about post 1", "postId": "1" }
            ],
            "profile": {
                "name": "typicode"
            }
        }


        # Execute o comando abaixo
        json-server db.json

        ou

        npx json-server db.json
        

        # Testando as rotas
        curl http://localhost:3000/posts/1

        curl http://localhost:3000/posts

    . Instalação do do Angular

        # Instalação do Angular
        sudo npm install -g @angular/cli@15

        # Verificação da versão do Angular
        ng version


        # Para desinstalar
        # npm uninstall -g @angular/cli
        # npm cache clean --force

        # Para atualizar
        # sudo npm install --save-dev @angular/cli@latest

2. Gerando o Projeto
--------------------

    . Criando um componente com o AngularCli

        . O comando "ng" é um atalho para o Angular CLI (Command Line Interface), que é uma ferramenta de linha de comando para 
            desenvolver aplicativos Angular. O Angular CLI fornece uma série de comandos que permitem executar tarefas comuns, 
            como criar novos componentes, executar testes, construir aplicativos, entre outros.

            . Uso do comando "ng"

                # cria um novo projeto Angular com o nome especificado.
                ng new nome-do-projetos

                # gera um novo componente Angular com o nome especificado.
                ng generate component nome-do-componente

                # inicia um servidor de desenvolvimento local para o projeto Angular atual.
                ng serve

                # executa os testes unitários do projeto Angular atual.
                ng test

                # constrói o projeto Angular atual para produção.
                ng build

                # inicia um servidor de desenvolvimento local para o projeto Angular atual em modo de produção.
                ng serve --prod

            . Abreviações do comando "ng"

                # Abreviação para ng new, cria um novo projeto Angular.
                ng n

                # Abreviação para ng generate, gera um novo componente, diretiva, pipe, serviço, etc.
                ng g

                # Abreviação para ng serve, inicia um servidor de desenvolvimento local para o projeto Angular atual.
                ng s

                # Abreviação para ng test, executa os testes unitários do projeto Angular atual.
                ng t

                # Abreviação para ng build, constrói o projeto Angular atual para produção.
                ng b

                # Abreviação para ng update, atualiza as dependências do projeto Angular atual.
                ng update

                # Abreviação para ng add, adiciona uma nova dependência ao projeto Angular atual.
                ng add

            . Abreviações par os tipos de arquivos que podem ser criados com o comand "ng"

                # Abreviação para ng g component, gera um novo componente Angular.
                ng g c
                
                # Abreviação para ng g directive, gera uma nova diretiva Angular.
                ng g d
                
                # Abreviação para ng g pipe, gera um novo pipe Angular.
                ng g p
                
                # Abreviação para ng g service, gera um novo serviço Angular.
                ng g s
                
                # Abreviação para ng g module, gera um novo módulo Angular.
                ng g m

            . Exemplo

                ng generate component bem-vindo --skip-tests

                # ou

                $ ng g c bem-vindo --skip-tests

            . O comando do exemplo acima criará o componente "src/bem-vindo/bem-vindo.component.ts"

                import { Component } from '@angular/core'

                @Component({
                    selector : 'app-bem-vindo',
                    templateUrl : './bem-vindo.component.html',
                    styleUrls : ['./bem-vindo.component.css']
                })

                export class BemVindoComponent{

                }
            
            . Para utilizar o componente acima, basta acessarmos o html "app.componente.html" e inserir a linha abaixo

                    <app-bem-vindo></app-bem-vindo>

            . Ao levantarmo o projeto com o comando abaixo, a página renderizada apresentará o conteúdo da página "bem-vindo.component.html"

                ng serve --open

                ou

                ng s -o

    . Demo

        . Crie um projeto com os comandos abaixo:

            # No questionamento "Would you like to add Angular routing?" Responda "Y"
            # No questionamento " Which stylesheet format would you like to use? " Responda "CSS"
            ng new stock-market
            
            cd stock-market/

            # Opção ao comando abaixo seria "ng s --open", ou "npm start"
            ng serve --open

    . Estrutura de pastas dos projetos Angular:

        +----node_modules --------------------------->  Dependências do Node.JS necessárias no projeto.                  
        +----src
            +----app      --------------------------->  Encontram-se todos os arquivos do projeto, como: componentes, diretivas, filtros e módulos da aplicação
                +----app.routing.module.ts
                +----app.component.css / app.component.scss
                +----app.component.html
                +----app.component.spec.ts
                +----app.component.ts
                +----app.module.ts
            +----assets   --------------------------->  Recursos externos do projeto, como CSS, imagens, bibliotecas JavaScript, etc.
            +----index.html
            +----main.ts
        +----.angular-cli.json

        . Arquivos da pasta src/app:

            . app.routing.app:              Módulo que configura as rotas para navegar entre as diferentes páginas ou componentes da aplicação

            . app.component.css/.scss:      Arquivo responsável pelo estilo do nosso módulo. Com o Angular nós trabalhamos 
                                            com os estilos separados para cada componente, assim conseguimos ter um desacoplamento de estilos. 
                                            Nesse exemplo nós criamos um projeto com a extensão .css, mas também temos a possibilidade de 
                                            trabalhar com arquivos Sass. Para que possamos alterar, basta executar o comando ng set 
                                            defaults.styleExt scss, ele irá configurar para que os próximos componentes sejam criados 
                                            com a extensão do .scss.

            . app.component.html:           Arquivo HTML do nosso componente App, segue o mesmo pensamento que os arquivos de estilo.

            . app.component.spec.ts:        Arquivo de teste do nosso componente.

            . app.component.ts:             É o componente principal da aplicação. Ele é responsável por definir a estrutura e o comportamento da 
                                            aplicação.

                . Definir a estrutura do componente principal da aplicação

                . Definir o template HTML e o estilo CSS do componente

                . Definir as propriedades e métodos do componente

            . app.module.ts:                O Angular é um framework modular, ele precisa de um ou mais módulos para que possamos 
                                            gerenciar os nossos componentes, esse módulo acaba sendo um default, mas podemos criar outros modules e 
                                            chamar eles dentro dele.

        . Arquivos da pasta src:

            . index.html:                   Esse seria o nosso arquivo root, dentro dele rodamos a nossa SPA (Single Page Application).

            . main.ts:                      É o ponto de entrada da aplicação. Ele é responsável por iniciar a aplicação e configurar o ambiente de execução

            . styles.css/.scss:             Como todos os nossos componentes tem o seu próprio arquivo .css ou .scss, nós podemos 
                                            utilizar esse arquivo para criar algo global como variáveis para nossa aplicação.

        . Pasta raiz do projeto:

            . tsconfig.app.json e 
                tsconfig.spec.json:         são os nossos arquivos de configuração do TypeScript.

            . .gitignore:                   Arquivo do git que utilizamos para o gerenciamento dos arquivos que serão ignorados no momento do 
                                            nosso commit.

            . package.json:                 Esse arquivo é o responsável por gerenciar as dependências do nosso projeto, quando executamos o comando  
                                            npm install [biblioteca] --save, ele verifica os pacotes que estão dentro desse arquivo e 
                                            baixa para o nosso diretório node_modules conforme foi visto no passo anterior. O parâmetro --save é para deixar
                                            registrado a dependência da biblioteca no arquivo package.json.

            . README.md:                    Arquivo Markdown para documentação da nossa aplicação.

            . tsconfig.json:                Arquivo de configuração do TypeScript.

            . tslint.json:                  O tslint fica verificando se estamos escrevendo o nosso código corretamente, ele verifica a 
                                            sintaxe do nosso projeto em tempo de execução e em caso de algum erro ou warning ele lança uma exception 
                                            no console.    

    . Obrigatoriedade de conteúdo das variáveis:

        . Existem várias configurações possíveis que permitem declarar uma propriedade sem ter que inicializá-la em um componente Angular. 
            Aqui estão algumas delas:

            . Usar o tipo "any", ou "undefined"
            
                . Podemos declarar uma propriedade com o tipo any, permitirá que a propriedade seja inicializada posteriormente.

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

                    @Component({
                        selector: 'app-exemplo',
                        template: '<p>Exemplo</p>'
                    })

                    export class ExemploComponent {
                        name: any;                  // <----------- Tipo any
                        description: undefined;     // <----------- Tipo undefined
                    }

            . Usar o operador "?", ou "!":

                . Podemos usar o operador "?", ou "!", para declarar uma propriedade que pode ser null ou undefined.

                . O simbolo de "!" significa que a propriedade sempre terá um valor não nulo

                . O simbolo de "?" significa que a propriedade poderá ter valor nulo

                . Exemplo

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

                    @Component({
                        selector: 'app-exemplo',
                        template: '<p>Exemplo</p>'
                    })

                    export class ExemploComponent {
                        name?: string;                  // <----------- Operador "!"
                        description!: string;           // <----------- Operador "?"
                    }

            . Podemos adicionar a seguinte configuração ao arquivo tsconfig.json para permitir declarar propriedades sem inicializá-las:

                // tsconfig.json
                {
                    ...
                    "compilerOptions": {
                        "strictPropertyInitialization": false,
                        ...
                    }
                    ...
                }

                . Exemplo

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

                    @Component({
                        selector: 'app-exemplo',
                        template: '<p>Exemplo</p>'
                    })

                    export class ExemploComponent {
                        name: string;
                        description: string; 
                    }

                . Essa configuração desativa a verificação de inicialização de propriedades estritas, permitindo que você declare 
                    propriedades sem inicializá-las.

            . Podemos utilizar o método construtor para iniciar o valor:

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

                @Component({
                    selector: 'app-exemplo',
                    template: '<p>Exemplo</p>'
                })

                export class ExemploComponent {
                    name: string;
                    description: string; 

                    constructor() {
                        name = "Bill Gates";                // Inicialização pelo método construtor
                        description = "Microsoft";
                    }
                }

    . Sequência de execução do Angular:

        . O inicio do projeto ocorrerá pelo componente src/main.ts:

            import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

            import { AppModule } from './app/app.module';       // Importação do modulo para iniciar a aplicação


            platformBrowserDynamic().bootstrapModule(AppModule)
                .catch(err => console.error(err));


            . Identificará o arquivo src/app/app.module.ts para iniciar a construção da página principal.

        . O arquivo src/app/app.module.ts faz a associação com os componentes principais da página principal:

            import { BrowserModule } from '@angular/platform-browser';
            import { NgModule } from '@angular/core';

            import { AppComponent } from './app.component';     // abrirá o arquivo src/app/app.component.ts

            @NgModule({
                declarations: [
                    AppComponent                    
                ],
                imports: [
                    BrowserModule
                ],
                providers: [],
                bootstrap: [AppComponent]       // Componente principal que iniciará a aplicação 
            })

            export class AppModule { }

            . Observe que é feito a importação do arquivo "./app.component" que iniciará a construção da página inicial:

            . Propriedades do arquivo app.module.ts

                . declarations: The components, directives, and pipes that belong to this NgModule.

                . exports: The subset of declarations that should be visible and usable in the component 
                            templates of other NgModules.

                . imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

                . providers: Creators of services that this NgModule contributes to the global collection of services;
                            they become accessible in all parts of the application. (You can also specify providers at the component level.)

                . bootstrap: The main application view, called the root component, which hosts all other application views.
                            Only the root NgModule should set the bootstrap property.

        . A partir da definição do componente principal o framework do angular abrirá o arquivo src/app/app.component.ts

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

            @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss']
            })
            export class AppComponent {
                title = 'weather-app';
            }

        . O arquivo "app.component.ts" é o componente principal da aplicação:

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

            @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss']
            })
            export class AppComponent {
                title = 'stock-app';
            }

            . Aqui está o que cada parte desse código faz:

                import { Component } from '@angular/core';:     Importa a classe Component do módulo @angular/core. Essa 
                                                                classe é usada para definir um componente Angular.

                @Component({...}):                              Define o componente AppComponent com as seguintes propriedades:

                    selector: 'app-root':                       Define o seletor do componente, que é usado para identificar o 
                                                                componente no HTML.

                    templateUrl: './app.component.html':        Define o arquivo HTML que será usado como template para o componente.

                    styleUrls: ['./app.component.css']:         Define o arquivo CSS que será usado para estilizar o componente.

                export class AppComponent { ... }:              Define a classe AppComponent que será exportada e usada como componente.

                title = 'stock-app';:                           Define uma propriedade title com o valor 'my-app'. Essa propriedade pode 
                                                                ser usada no template HTML para exibir o título da aplicação.

        . O app.component.ts irá vincular com o template src/app/app.component.html

        . Onde criará a página index.html fazendo a substituição da tag <app-root>

        . Fluxo de execução

                +-------------------+
                |   src/main.ts     |   import { AppModule } from './app/app.module'; 
                +-------------------+
                        |
                        |
                        V
            +---------------------------+
            |   src/app/app.module.ts   |   import { AppComponent } from './app.component'
            +---------------------------+   ... bootstrap: [AppComponent]
                        |                   export class AppModule { }
                        |
                        |
                        V                       @Component({
            +-------------------------------+       selector: 'app-root',
            |   src/app/app.component.ts    |       templateUrl: './app.component.html', 
            +-------------------------------+       styleUrls: ['./app.component.scss'] 
                        |                       })
                        |
                        V
            +-------------------------------+
            |   src/app/app.component.html  |
            +-------------------------------+
                        |
                        |
                        V
                +---------------+
                |   index.html  |           <app-root></app-root>
                +---------------+

     . A criação de um componente no projeto é feito através do comando:

        ng generate component [nome do componente]

        ou

        ng g c [nome do componente]
        
    . Demo

        . Crie o componente "stock-item" de acordo com a linha abaixo:

            ng generate component stock/stock-item            

            # O comando angularCli apresentará o seguinte resultado na tela
            # CREATE src/app/stock/stock-item/stock-item.component.css (0 bytes)
            # CREATE src/app/stock/stock-item/stock-item.component.html (25 bytes)
            # CREATE src/app/stock/stock-item/stock-item.component.spec.ts (621 bytes)
            # CREATE src/app/stock/stock-item/stock-item.component.ts (217 bytes)
            # UPDATE src/app/app.module.ts (495 bytes)

        . Altere o componente "stock-item.component.ts" como abaixo:

            import { Component, OnInit } from '@angular/core';      // Acrescente no import a interface "OnInit"

            @Component({
                selector: 'app-stock-item',
                templateUrl: './stock-item.component.html',
                styleUrls: ['./stock-item.component.css']
            })

            export class StockItemComponent implements OnInit {     // Implemente a interface "OnInit"
                public name!: string;                               // Implemente as propriedades
                public code!: string;                               // Implemente as propriedades
                public price!: number;                              // Implemente as propriedades
                public previousPrice!: number;                      // Implemente as propriedades

                ngOnInit(): void {                                  // Crie o método "ngOnInit" da interface "OnInit"
                    this.name = "Test Stock Company";               // Atualize os valores das propriedades
                    this.code = "TSC"                               // Atualize os valores das propriedades
                    this.price = 85;                                // Atualize os valores das propriedades
                    this.previousPrice = 80;                        // Atualize os valores das propriedades
                }
            }

        . Altere o conteúdo do componente "stock-item.component.html" com o conteúdo abaixo:

            <h1>Welcome to app!</h1>
            <div class="stock-container">
                <div class="name">
                    <h3>{{name}}</h3> - <h4>({{code}})</h4>
                </div>
                <div class="price">$ {{price}}</div>
            </div>

        . Atualize o conteúdo do componente "stock-item.component.css" com o conteúdo abaixo:

            .stock-container {
                border: 1px solid black;
                border-radius: 5px;
                display: inline-block;
                padding: 10px;
            }

            .stock-container .name h3,
            .stock-container .name h4 {
                display: inline-block;
            }

        . Atualize o conteúdo do componente "app.component.html" com a linha abaixo:

            <app-stock-item></app-stock-item>

        . Execute o projeto com o comando abaixo:

            ng s -o       

    . Mudanças feitas no arquivo "app.module.ts" automaticamente, após a geranção do componentes "stock-item":

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { AppComponent } from './app.component';
        import { StockItemComponent } from './stock/stock-item/stockitem.component';    // Linha inserida

        @NgModule({
            declarations: [
                AppComponent,
                StockItemComponent                                                      // Linha inserida
            ],
            imports: [
                BrowserModule
            ],
            providers: [],
            bootstrap: [AppComponent]
        })

        export class AppModule { }

    . Entendimento do que foi feito:

        . Componente criado "stock-item.component.ts"

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

        @Component({
            selector: 'app-stock-item',                         //  seletor do componente, utilizado para identificar o componente no HTML.
            templateUrl: './stock-item.component.html',
            styleUrls: ['./stock-item.component.css']
        })

        export class StockItemComponent implements OnInit {
            constructor() { }
            
            ngOnInit() {
            }
        }

        . Bibliotecas utilizadas

            . Bibliotecas criadas automaticamente na criação do projeto:

                . NgModule

                    . Um módulo é definido usando o decorator @NgModule, que recebe um objeto com várias propriedades:

                        . declarations: lista de componentes, diretivas e pipes que fazem parte do módulo
                        . imports: lista de módulos que são importados pelo módulo atual
                        . providers: lista de serviços que são fornecidos pelo módulo
                        . bootstrap: lista de componentes que são carregados inicialmente quando o módulo é iniciado

                    . A biblioteca NgModule serve para:

                        . Organizar a aplicação em módulos independentes e reutilizáveis
                        . Fornecer uma forma de gerenciar as dependências entre os componentes e serviços
                        . Habilitar a funcionalidade de lazy loading, que permite carregar módulos apenas quando necessário

                . BrowserModule

                    . Fornece o mecanismo de renderização para o navegador

                    . Habilita a funcionalidade de roteamento

                    . Fornece serviços para trabalhar com o DOM (Document Object Model)

                    . Habilita a funcionalidade de eventos do navegador

    . Demo - Instalando a biblioteca CSS do Bootstrap

        . No prompt do terminal, acesse a pasta raiz do projeto e instale o bootstrap com o comando abaixo:

            $ npm install bootstrap@5.3.3 --save

        . Acesse o arquivo angular.json da pasta raiz do projeto, localize o atributo "styles" e inclua a configuração do 
            bootstrap como abaixo:

            ...
            "styles": [
                /* "styles.css",  apague esse linha */
                "./node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            ...

        . Acesse o arquivo app.component.html da pasta raiz e substitua pelo código abaixo:

            <div class="container">
                <div class="jumbotron">
                    <h1 class="display-4">Hello, world!</h1>
                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <hr class="my-4">
                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                </div>
            </div>

3. Data Binding
----------------

    . Fonte de pesquisa:

        https://www.tutorialspoint.com/angular8/angular8_data_binding.htm

    . É uma técnica fundamental no Angular que permite ligar os dados do componente à view, de forma que os 
        dados sejam atualizados automaticamente quando o componente é atualizado.

    . Vantagens

        . Atualização automática

        . Redução de código

        . Melhoria na manutenção.

    . Desvantagens

        . Complexidade

        . Desempenho, se for utilizado incorretamente.

    . O data binding pode ser feito de duas forma:

        . One-way - É uma interação unidirecional entre o componente e seu modelo. Se você executar qualquer 
                    alteração em seu componente, ele refletirá os elementos HTML.

        . Two-way - É uma interação bidirecional, os dados fluem em ambas as direções (do componente para as 
                    visualizações e das visualizações para o componente)

    . One-way Data Binding

        . Data binding é uma técnica, onde o dado fica sincronizado entre o componente e a visão.

        . Essa técnica é dividida em 6 grupos:

            . Property binding: [property]="valor propriedade" - utilizado para ligar o dado de uma propriedade de um componente para 
                                o elemento DOM, onde "property" seria a propriedade do elemento: disabled, autocomplete, required, etc; e
                                o "valor da propriedade" seria o valor necessário da propriedade: true/false, 50, etc.

                    // *.component.ts
                    export class TestComponent { 
                        userName:string = "Peter"; 
                    }

                    // *.component.html
                    // userName property is bind to an attribute of a DOM element <input> tag
                    <input type="text" [value]="userName" [disabled]="true" >

            . String Interpolação: {{nome}} - onde nome é uma propriedade do componente, entre {{ }}

                // *.component.ts
                export class TestComponent implements OnInit { 
                    appName = "My first app in Angular 4"; 
                }

                // *.component.html 
                <h1>{{appName}}</h1>            

                // app.component.html
                <app-test></app-test>

            . Style binding  é usado para ligar o dado do componente para a propriedade de estilo do HTML:

                // *.component.ts
                export class TestComponent { 
                    myColor = 'brown';
                }

                // *.component.html
                <p [style.color]="myColor">Text color is styled using style binding</p>            

            . Event Binding: (evento)="função do componente Angular", onde o evento é nome do evento do elemento 
                                HTML: click(), hover(), doubleClick(), etc, que será associado ao método do componente Angular:

                // *.component.ts
                export class TestComponent { 
                    showData(event: any){ 
                        console.log("button is clicked!"); if(event) { 
                            console.log(event.target); 
                            console.log(event.target.value); 
                        } 
                    } 
                }

                // *.component.html
                <h2>Event Binding</h2> 
                <button (click)="showData($event)">Click here</button>


                // ou podemos utilizar o prefixo "on" + o nome do evento

                <button on-click="showData($event)">Click here</button>

            . Class binding é usado para ligar o dado do componente para a propriedade class do HTML:

                // *.component.ts
                export class TestComponent { 
                    myCSSClass = "red"; 
                    applyCSSClass = false; 
                }

                // *.component.html
                <p [class]="myCSSClass">This paragraph class comes from *myClass* property </p> 
                <p [class.blue]="applyCSSClass">This paragraph class does not apply</p>

            . Attribute binding: [attr:attribute name]="Nome da Propriedade do Componente" - é usado para ligar o dado de um componente para o 
                                atributo HTML:

                // *.component.ts
                import { Component } from '@angular/core';  // Obrigatório importação do "Component"

                @Component({
                    selector: 'app-root',
                    templateUrl: './app.component.html',
                    styleUrls: ['./app.component.css']
                })

                export class AppComponent {

                    // Declaração das propriedade para ser usado nos Attribute Binding
                    titulo = 'Este é um exemplo de Attribute Binding';
                    isDisabled = true;
                    placeholder = 'Digite seu nome';
                    estilo = 'color: blue; font-size: 24px;';
                    classe = 'exemplo-classe';

                    acao() {
                        console.log('Botão clicado!');
                    }
                }

                // *.component.html
                <div [attr.title]="titulo">Este é um exemplo de Attribute Binding</div>

                <button (click)="acao()" [attr.disabled]="isDisabled">Clique aqui</button>

                <input [attr.placeholder]="placeholder" type="text">

                <div [attr.style]="estilo">Este é um exemplo de Attribute Binding</div>

                <div [attr.class]="classe">Este é um exemplo de Attribute Binding</div>

        . Demo - Property Binding

                . Altere o componenete "stock-item.component.ts" como abaixo:

                    import { Component, OnInit } from '@angular/core';
                        @Component({
                            selector: 'app-stock-item',
                            templateUrl: './stock-item.component.html',
                            styleUrls: ['./stock-item.component.css']
                        })

                        export class StockItemComponent implements OnInit {
                            public name!: string;
                            public code!: string;
                            public price!: number;
                            public previousPrice!: number;
                            public positiveChange!: boolean;                 // Linha inserida

                            constructor() { }

                            ngOnInit() {
                                this.name = 'Test Stock Company';
                                this.code = 'TSC';
                                this.price = 85;
                                this.previousPrice = 80;
                                this.positiveChange = this.price >= this.previousPrice;     // Linha inserida
                            }
                    }        

                . Insira as linhas abaixo no arquivo "stock-item.component.css":

                    ...
                    .positive {
                        color: green;
                    } 
                    .negative {
                        color: red;
                    }

                . Insira as linhas abaixo no arquivo "stock-item.component.html"

                    <div class="stock-container">
                        <div class="name">
                            <h3>{{name}}</h3> - <h4>({{code}})</h4>
                        </div>
                        
                        <!-- DIV alterada 
                        
                        <div class="price">$ {{price}}</div>
                        
                        Fim da alteração -->

                        <div [class]="positiveChange ? 'positive' : 'negative'">
                            $ {{price}}
                        </div>
                        </div>            
                    </div>            

                . Altere o conteúdo do arquivo "stock-item.component.html" pelo abaixo:

                    <app-stock-item></app-stock-item>

                . Execute o projeto e veja o resultado:

                    ng s -o

        . Demo - Event Binding

            . Crie as linhas abaixo na classe "stock-item.component.ts"


                export class StockItemComponent implements OnInit {
                    ...
                    public favorite: boolean;           // Propriedade criada
                    
                    constructor() { }
                    ...

                    // Método criado
                    toggleFavorite() {
                        console.log('We are toggling the favorite state for this stock');
                        this.favorite = !this.favorite;
                    }
                }

            . Crie as linhas abaixo na no arquivo "stock-item.component.html"

                <div class="stock-container">
                    <div class="name">
                        {{name + ' (' + code + ')'}}
                    </div>

                    <div [class]="positiveChange ? 'positive' : 'negative'">
                        $ {{price}}
                    </div>

                    <!-- Button Criado -->
                    <button (click)="toggleFavorite()" 
                            [disabled]="favorite"
                            class="btn btn-primary">
                        Add to Favorite
                    </button>
                </div>        

            . Execute o projeto e veja se o resultado foi o botão desabilitado quando é clicado:

                ng s -o

            . Envio do evento disparado

                . Inclua o envio do evento como abaixo na classe "stock-item.component.ts"

                    export class StockItemComponent implements OnInit {
                        ...
                        public favorite: boolean;      
                        
                        constructor() { }
                        ...

                        // Inclua na assinatura do método o parâmetro "evento". 
                        toggleFavorite( event: any ) {
                            console.log('We are toggling the favorite state for this stock', event);       // Altere a linha
                            console.log('We are toggling the favorite state for this stock', event.target);       // Altere a linha
                            this.favorite = !this.favorite;
                        }
                    }

                . Crie as linhas abaixo na no arquivo "stock-item.component.html"

                    <div class="stock-container">
                        <div class="name">{{name + ' (' + code + ')'}}</div>
                            <div  [class]="positiveChange ? 'positive' : 'negative'">
                                $ {{price}}
                            </div>

                            <!-- Adicione o parâmetro $event na chamada do método -->
                            <button (click)="toggleFavorite( $event )"
                                    [disabled]="favorite">
                                Add to Favorite
                            </button>
                    </div>        

            . Execute o projeto e veja o resultado no console do navegador

                ng s -o


        . Models Class no desenvolvimento 

            . A utilização de "Models Class" auxilia na clareza do código.

            . As principais vantagens são:

                . Separação de Concerns: As classes modelos permitem separar a lógica de negócios da lógica de apresentação, 
                    tornando o código mais organizado e fácil de manter.

                . Reutilização de Código: As classes modelos podem ser reutilizadas em diferentes componentes e serviços, 
                    reduzindo a duplicação de código e melhorando a eficiência.

                . Tipagem Forte: As classes modelos permitem a utilização de tipagem forte, o que ajuda a evitar erros de 
                    tipo e melhora a segurança do código.

                . Legibilidade: As classes modelos tornam o código mais legível, pois as propriedades e métodos são claramente 
                    definidos e organizados.

                . Manutenção: As classes modelos facilitam a manutenção do código, pois as alterações podem ser feitas em um 
                    único local, sem afetar outras partes do sistema.

                . Testabilidade: As classes modelos tornam o código mais testável, pois as propriedades e métodos podem ser 
                    facilmente isolados e testados.

                . Escalabilidade: As classes modelos permitem que o sistema seja escalado de forma mais fácil, pois as classes 
                    podem ser adicionadas ou removidas sem afetar a estrutura geral do sistema.

                . Integração com Outros Componentes: As classes modelos podem ser facilmente integradas com outros componentes e 
                    serviços, tornando a comunicação entre eles mais fácil e eficiente.

                . Melhoria da Performance: As classes modelos podem ajudar a melhorar a performance do sistema, pois as propriedades e 
                    métodos podem ser otimizados para reduzir a carga de processamento.

                . Conformidade com Padrões: As classes modelos permitem que o sistema seja desenvolvido de acordo com padrões e 
                    convenções estabelecidas, o que ajuda a garantir a qualidade e a manutenibilidade do código.

            . Além disso, as classes modelos também permitem a utilização de recursos como:

                . Injeção de Dependências: As classes modelos podem ser injetadas com dependências, o que torna a criação de 
                    instâncias mais fácil e flexível.

                . Herança: As classes modelos podem herdar propriedades e métodos de outras classes, o que permite a criação de 
                    hierarquias de classes mais complexas.

                . Polimorfismo: As classes modelos podem ser polimórficas, o que permite que as mesmas propriedades e métodos 
                    sejam utilizados de forma diferente em diferentes contextos.

        . Demo (Models Class)

            . Execute o comando abaixo na pasta raiz do projeto

                ng generate class model/stock --skip-tests

            . Adapte a classe model criada conforme abaixo:

                export class Stock {
                    favorite: boolean = false;

                    constructor(public name: string,
                                public code: string,
                                public price: number,
                                public previousPrice: number) {}

                    isPositiveChange(): boolean {
                        return this.price >= this.previousPrice;
                    }
                }

            . Altere o código do componente "stock-item.component.ts" como abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from '../../model/stock';                  // Linha inserida

                @Component({
                    selector: 'app-stock-item',
                    templateUrl: './stock-item.component.html',
                    styleUrls: ['./stock-item.component.css']
                })

                export class StockItemComponent implements OnInit {
                    /*                                                      Linhas eliminadas
                        public name!: string;
                        public code!: string;
                        public price!: number;
                        public previousPrice!: number;
                        public positiveChange!: boolean;                 
                        public favorite!: boolean;                       
                    */

                    public stock!: Stock;                                           // Linha Inserida

                    constructor() { }
                    
                    ngOnInit() {
                        /*                                                          Linhas eliminadas
                            this.name = "Test Stock Company";
                            this.code = "TSC"
                            this.price = 85;
                            this.previousPrice = 80;
                            this.positiveChange = this.price >= this.previousPrice;     // Linha inserida
                        */

                        this.stock = new Stock('Test Stock Company', 'TSC', 85, 80);    // Linha inserida
                    } 
                    
                    toggleFavorite(event) {
                        console.log('We are toggling the favorite state for this stock', event);

                        // this.favorite = !this.favorite;                              // Linha eliminada


                        this.stock.favorite = !this.stock.favorite;                     // Linha inserida
                    }
                }

            . Altere o código do componente "stock-item.component.html" como abaixo:

                <div class="stock-container">
                    <div class="name">
                        {{stock.name + ' (' + stock.code + ')'}}            <!-- Linha alterada -->
                    </div>
                
                    <!-- Div inteira alterada -->
                    <div class="price"                                      
                        [class]="stock.isPositiveChange() ? 'positive' :
                                                            'negative'">    
                        $ {{stock.price}}
                    </div>

                    <!-- Div alterada -->
                    <button (click)="toggleFavorite($event)"
                            [disabled]="stock.favorite"
                            class="btn btn-primary">
                        Add to Favorite
                    </button>
                </div>

            . Execute o projeto e veja o resultado está funcionando como antes:

                ng s -o

        . Class Binding

            . [ngClass] e [class] binding é usado para ligar o dado do componente para a propriedade class do HTML:

                . ngClass

                    . Usada para adicionar ou remover classes CSS dinamicamente em um elemento HTML com base em uma condição ou expressão.

                        // *.component.html
                        <div [ngClass]="{'ativo': isAtivo, 'desabilitado': isDesabilitado}">
                            <p>Texto do componente</p>
                            <button (click)="toggleAtivo()">Toggle Ativo</button>
                            <button (click)="toggleDesabilitado()">Toggle Desabilitado</button>
                        </div>

                        // *.component.css
                        .ativo {
                            background-color: #007bff;
                            color: #fff;
                            padding: 10px 20px;
                        }
                        
                        .desabilitado {
                            background-color: #6c757d;
                            color: #fff;
                            padding: 10px 20px;
                            opacity: 0.5;
                        }

                        // *.component.ts
                        import { Component } from '@angular/core';
                        
                        @Component({
                            selector: 'app-ngclass-example',
                            templateUrl: './ngclass-example.component.html',
                            styleUrls: ['./ngclass-example.component.css']
                        })
                        export class NgClassExampleComponent {
                            isAtivo = true;
                            isDesabilitado = false;
                        
                            toggleAtivo() {
                            this.isAtivo = !this.isAtivo;
                            }
                        
                            toggleDesabilitado() {
                            this.isDesabilitado = !this.isDesabilitado;
                            }
                        }

                        // app.component.html 
                        <app-ngclass-example></app-ngclass-example>

                    . Nesse exemplo, temos um componente que possui uma div com a diretiva ngClass que aplica as classes 
                        CSS ativo e desabilitado com base nas propriedades isAtivo e isDesabilitado. Quando o botão 
                        "Toggle Ativo" é clicado, a propriedade isAtivo é alternada e a classe CSS ativo é aplicada 
                        ou removida. Da mesma forma, quando o botão "Toggle Desabilitado" é clicado, a propriedade 
                        isDesabilitado é alternada e a classe CSS desabilitado é aplicada ou removida.


                                                                                                // *.component.ts
                                                                                                import { Component } from '@angular/core';
                                                                                                ...
                                                                                                export class NgClassExampleComponent {
                                                                                                    isAtivo = true;
                                                +---------------------------+-------------->        isDesabilitado = false;
                                                |                           |                        ...
                                                |                           |                   }
                                                |                           |
                                                |                           |
                        [ngClass]="{'ativo': isAtivo, 'desabilitado': isDesabilitado}">
                                        |                   |
                                        +-------------------+------------------------------>    // *.component.css
                                                                                                .ativo {
                                                                                                    ...
                                                                                                }
                                                                                                
                                                                                                .desabilitado {
                                                                                                    ...
                                                                                                }

                . class

                    . Usada para adicionar ou remover classes CSS de um elemento HTML. Ela é uma diretiva de ligação de propriedade 
                        que permite vincular uma expressão a uma classe CSS.

                        // *.component.css
                        .ativo {
                            background-color: #ccc;
                            color: #333;
                        }

                        // *.component.html
                        <div [class]="ativo ? 'ativo' : ''">Este é um elemento</div>

                        // *.component.ts
                        import { Component } from '@angular/core';
                        
                        @Component({
                            selector: 'app-exemplo',
                            templateUrl: './exemplo.component.html',
                            styleUrls: ['./exemplo.component.css']
                        })
                        export class ExemploComponent {
                            ativo = true;
                        }

                . A diferença entre as diretivas [class] e [ngClass] é que:

                    . [class] - depende somente de uma condição para adicionar/remover um estilo css. Como se fosse um IF/ELSE

                    . [ngClass] - Utiliza um case/switch de opções para encontrar o estilo, como se fosse um CASE/WHEN, ou um SWITCH

                . Use class quando você precisa adicionar ou remover apenas uma classe CSS e a lógica é simples.

                . Use ngClass quando você precisa adicionar ou remover várias classes CSS com base em condições 
                    diferentes ou quando a lógica é mais complexa.
        
        . Demo - Class Binding "ngClass e class"

            . Adicione as linhas abaixo no stock-item.component.css

                ...
                .large-change {
                    font-size: 1.2em;
                } 

                .small-change {
                    font-size: 0.8em;
                }   

            . Adicione as linhas abaixo no stock-item.component.html

                <div class="stock-container">
                        <div class="name">{{stock.name + ' (' + stock.code + ')'}}</div>
                        
                        <div    class="price"
                                [ngClass]="stockClasses">           <!-- Div alterada -->
                            $ {{stock.price}}
                        </div>
                        
                        <button (click)="toggleFavorite($event)"
                                [disabled]="stock.favorite">
                            Add to Favorite
                        </button>
                </div>

            . Adicione as linhas abaixo no stock-item.component.ts

                import { Component, OnInit } from '@angular/core';
                import { Stock } from '../../model/stock';

                @Component({
                    selector: 'app-stock-item',
                    templateUrl: './stock-item.component.html',
                    styleUrls: ['./stock-item.component.css']
                })

                export class StockItemComponent implements OnInit {
                    public stock: Stock;
                    public stockClasses!: any;        // Linha inserida

                    constructor() { }

                    ngOnInit() {
                        this.stock = new Stock('Test Stock Company', 'TSC', 85, 80);

                        let diff = (this.stock.price / this.stock.previousPrice) - 1;   // Linha inserida
                        let largeChange = Math.abs(diff) > 0.01;                        // Linha inserida
                        this.stockClasses = {                                           // Linha/objeto inserido
                            "positive": this.stock.isPositiveChange(),
                            "negative": !this.stock.isPositiveChange(),
                            "large-change": largeChange,
                            "small-change": !largeChange
                        };

                    } 

                    toggleFavorite(event) {
                        console.log('We are toggling the favorite state for this stock', event);
                        this.stock.favorite = !this.stock.favorite;
                    }
                }                    

            . Execute o projeto e veja o resultado está funcionando como antes:

                ng s -o

            . Altere o código do componente "stock-item.component.html" com o conteúdo abaixo:

                <div class="stock-container">
                    <div class="name">
                        {{stock.name + ' (' + stock.code + ')'}} 
                    </div>

                                        <!--                Atributo alterado                   -->
                    <div class="price"  [class]="stock.isPositiveChange() ? 'positive' : 'negative'"> 
                        $ {{stock.price}}
                    </div>

                    <button (click)="toggleFavorite($event)" [disabled]="stock.favorite">
                        Add to Favorite
                    </button>

                </div>

            . Execute o projeto e veja o resultado está funcionando como antes:

                ng s -o

            . Altere o código do componente "stock-item.component.html" com o conteúdo abaixo:

                <div class="stock-container">
                    <div class="name">
                        {{stock.name + ' (' + stock.code + ')'}} 
                    </div>

                                        <!--                Atributo alterado                   -->
                    <div class="price"  [class.positive]="stock.isPositiveChange()" [class.negative]="!stock.isPositiveChange()"  >  <!-- [ngStyle]="stockStyles"> --> <!-- Div alterada -->
                        $ {{stock.price}}
                    </div>

                    <button (click)="toggleFavorite($event)" [disabled]="stock.favorite">
                        Add to Favorite
                    </button>

                </div>

        . Style Binding

            . [ngStyle], [attr...]  

                . [ngStyle] - Trabalha de forma parecida do [ngClass] 

                    <div [ngStyle]="{'background-color': 'red', 'color': 'white'}">...</div>

                    <div [ngStyle]="{'background-color': isActive ? 'red' : '', 'color': isActive ? 'white' : ''}">...</div>

                    <div [ngStyle]="objStyle">...</div>

        . Demo - Style Binding "ngStyle"

            . Altere o arquivo "stock-item.component.ts" como abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from '../../model/stock';

                @Component({
                    selector: 'app-stock-item',
                    templateUrl: './stock-item.component.html',
                    styleUrls: ['./stock-item.component.css']
                })

                export class StockItemComponent implements OnInit {
                    public stock!: Stock;
                    public stockStyles!: any;                                              // Linha inserida

                    constructor() { }

                    ngOnInit() {
                        this.stock = new Stock('Test Stock Company', 'TSC', 85, 80);
                        let diff = (this.stock.price / this.stock.previousPrice) - 1;
                        let largeChange = Math.abs(diff) > 0.01;

                        this.stockClasses = {                                           
                            "positive": this.stock.isPositiveChange(),
                            "negative": !this.stock.isPositiveChange(),
                            "large-change": largeChange,
                            "small-change": !largeChange
                        };


                        this.stockStyles = {                                                // Objeto inserido
                            "color": this.stock.isPositiveChange() ? "green" : "red",
                            "font-size": largeChange ? "1.2em" : "0.8em"
                        };
                    } 

                    toggleFavorite(event) {
                        console.log('We are toggling the favorite state for this stock',
                        event);
                        this.stock.favorite = !this.stock.favorite;
                    }
                }


            . Altere o componente "stock-item.component.html" como abaixo:

                <div class="stock-container">
                    <div class="name">
                        {{stock.name + ' (' + stock.code + ')'}}
                    </div>

                    <div    class="price"
                            [ngStyle]="stockStyles">            <!-- Div alterada -->
                        $ {{stock.price}}
                    </div>

                    <button (click)="toggleFavorite($event)"
                            [disabled]="stock.favorite">
                        Add to Favorite
                    </button>
                </div>

            . Execute o projeto e veja o resultado está funcionando como antes:

                ng s -o

    . Two-way Data Binding

        . ngModel 

            . Forma One-Way:

                <input type="text" 
                    class="form-control"
                    (input)="alterarNome($event)"
                    [value]="nome">

            . Forma Two-Way:

                <input type="text"
                        class="form-control"
                        name="nome"
                        [(ngModel)]="nome">

            . Para utilizar [(ngModel)] é obrigatório informar o atributo "name" na tag HTML

            . Usada para criar uma ligação bidirecional entre o formulário e o modelo de dados, permitindo que 
                    os dados sejam atualizados automaticamente quando o usuário interage com o formulário.

                <input type="text" [(ngModel)]="nome">

                <!-- 
                    . Quando o usuário digita algo no campo, o modelo de dados é atualizado automaticamente.
                    . Quando o modelo de dados é atualizado, o campo de formulário é atualizado automaticamente.
                -->

            . Quando usamos o "ngModel" sem o símbolo "[()]" em torno dele, ele funciona de forma unidirecional. Isso significa que o 
                valor do elemento de formulário é atualizado automaticamente na propriedade do componente, mas o valor da propriedade do 
                componente não é atualizado automaticamente no elemento de formulário.

                <input type="text" ngModel="nome">
                
                <!-- 
                    Nesse caso, quando o usuário digita algo no formulário, o valor é atualizado automaticamente na propriedade nome do componente. 
                    No entanto, se você atualizar a propriedade nome do componente em algum lugar do seu código, o valor não será atualizado 
                    automaticamente no formulário.
                --!>

            . "ngModel" encontra-se no pacote "FormsModule":

                . FormsModule -  Um pacote que serve para fornecer funcionalidades de formulários para a aplicação

                    . Fornece diretivas para criar e gerenciar formulários

                    . Permiti a validação de dados de formulário

                    . Fornece funcionalidades de binding de dados para formulários

                    . Fornece diretivas, como:

                        . ngModel: diretiva para criar um binding de dados entre um formulário e um componente

                        . ngForm: diretiva para criar um formulário. Fornece uma forma de gerenciar os dados de formulário e 
                                    realizar validações de forma automática.

                        . ngFormGroup: diretiva para criar um grupo de formulários e gerenciar os dados de formulário

                        . ngFormControl: diretiva para criar um controle de formulário e gerenciar os dados de formulário 

                        . ngFormArray: diretiva para criar um array de formulários e gerenciar os dados de formulário                

            . Para trabalhar com ngModel é necessário importar o pacote "FormsModule" dentro do componente "app.module.ts":

                ...
                import { FormsModule } from '@angular/forms';
                ...
                imports :[
                    ...
                    FormsModule
                ]

            . Exemplos

                Exemplo 1

                    // *.component.ts
                    import { Component } from '@angular/core';

                    @Component({
                        selector: 'app-root',
                        templateUrl: './app.component.html',
                        styleUrls: ['./app.component.css']
                    })
                    export class AppComponent {
                        nome = 'João';
                    }

                    // *.component.html
                    <input type="text" [(ngModel)]="nome">
                    <p>Olá, {{ nome }}!</p>

                Exemplo 2

                    // *.component.ts
                    import { Component } from '@angular/core';

                    @Component({
                        selector: 'app-root',
                        templateUrl: './app.component.html',
                        styleUrls: ['./app.component.css']
                    })
                    export class AppComponent {
                        cor = 'azul';
                    }


                    // *.component.html
                    <select [(ngModel)]="cor">
                        <option value="vermelho">Vermelho</option>
                        <option value="azul">Azul</option>
                        <option value="verde">Verde</option>
                    </select>
                    <p>A cor selecionada é: {{ cor }}</p>

                Exemplo 3

                    // *.component.ts
                    import { Component } from '@angular/core';

                    @Component({
                        selector: 'app-root',
                        templateUrl: './app.component.html',
                        styleUrls: ['./app.component.css']
                    })
                    export class AppComponent {
                        aceito = false;
                    }


                    // *.component.html
                    <input type="checkbox" [(ngModel)]="aceito">
                    <p>Você aceitou os termos? {{ aceito }}</p>

                Exemplo 4

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

                    @Component({
                        selector: 'app-root',
                        templateUrl: './app.component.html',
                        styleUrls: ['./app.component.css']
                    })
                    export class AppComponent {
                        opcao = 'opcao1';
                    }

                    <input type="radio" [(ngModel)]="opcao" value="opcao1"> Opção 1
                    <input type="radio" [(ngModel)]="opcao" value="opcao2"> Opção 2
                    <p>A opção selecionada é: {{ opcao }}</p>

        . Demo - ngModel

            . Execute a linha abaixo na raiz do projeto

                ng g component stock/create-stock  --skip-tests          

            . Altere o componente "create-stock.component.ts" com o conteúdo abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from 'src/app/model/stock';                    // Linha inserida

                @Component({
                    selector: 'app-create-stock',
                    templateUrl: './create-stock.component.html',
                    styleUrls: ['./create-stock.component.css']
                })

                export class CreateStockComponent {
                    public stock: Stock;                                    // Linha inserida

                    constructor() {                                         // Construtor e conteúdo inserido
                        this.stock = new Stock('test', '', 0, 0);
                    }
                }

            . Altere o conteúdo do componente "create-stock.component​.html" com as linhas abaixo:

                <h2>Create Stock Form</h2>

                <div class="form-group">
                    <form>
                        <div class="stock-name">
                            <input type="text"
                                    placeholder="Stock Name"
                                    [value]="stock.name"
                                    (input)="stock.name=$any($event.target).value">

                                    <!--    Poderiamos fazer desta forma também 
                                            (input)="onInputName($event)"> 
                                    -->
                                    <!--                    
                                            onInputName(event: any) {
                                                this.stock.name = event.target.value;
                                            }
                                    -->
                        </div>
                    </form>
                    <button (click)="stock.name='test'">Reset stock name</button>
                </div>

                <h4>Stock Name is {{stock.name}}</h4>

            . Altere o conteúdo do componente "app.component.html" com o conteúdo abaixo:

                <app-create-stock></app-create-stock>

            . Execute o projeto e veja se o resultado saiu conforme o esperado

                ng s -o

            . Altere o componente "app.modules.ts" como abaixo:

                ...
                import { FormsModule } from '@angular/forms';       // Linha inserida

                @NgModule({
                    declarations: [
                        ...
                    ],
                    imports: [
                        ...,
                        FormsModule                                 // Linha inserida
                    ],
                    providers: [],
                    bootstrap: [AppComponent]
                })
                export class AppModule { }

            . Altere o componente "create-stock.component.html" como abaixo:

                <h2>Create Stock Form</h2>

                <div class="form-group">
                    <form>

                        <!-- Inclusão do atributo "name" é a diretiva [(ngModel)] -->

                        <div class="stock-name">
                            <input type="text"
                                    placeholder="Stock Name"
                                    name="stockName"
                                    [(ngModel)]="stock.name">
                        </div>
                    </form>
                    <button (click)="stock.name='test'">Reset stock name</button>
                </div>

                <h4>Stock Name is {{stock.name}}</h4>

            . Execute o projeto e veja se o resultado saiu conforme o esperado

                ng s -o


        . ngModelChange

            . É um evento do Angular que é disparado quando o valor de um campo de formulário é alterado. Ele é utilizado em 
                conjunto com a diretiva ngModel para criar uma ligação bidirecional entre o campo de formulário e o modelo de dados.

                <!-- HTML -->
                <input type="text" [ngModel]="nome" (ngModelChange)="onNomeChange($event)">

                // Typescript
                onNomeChange(event: any) {
                    console.log('Nome alterado:', event);
                    this.nome = event;
                }

        . ngSubmit

            . É um evento do Angular que é disparado quando um formulário é submetido.

                <!-- HTML -->
                <form (ngSubmit)="onSubmit()">
                    <input type="text" name="nome">
                    <input type="text" name="sobrenome">
                    <button type="submit">Enviar</button>
                </form>


                // Typescript
                @Component({
                    selector: 'app-exemplo',
                    templateUrl: './exemplo.component.html',
                    styleUrls: ['./exemplo.component.css']
                })

                export class ExemploComponent {
                    onSubmit() {
                        console.log('Formulário submetido');
                        // Processar os dados do formulário
                    }
                }

        . Demo - ngModelChange e ngSubmit

            . Altere o model "stock.ts" com o abaixo:

                export class Stock {
                    favorite = false;

                    constructor(public name: string,
                        public code: string,
                        public price: number,
                        public previousPrice: number,
                        public exchange: string) {}             // Parâmetro incluido

                    isPositiveChange(): boolean {
                        return this.price >= this.previousPrice;
                    }
                }



            . Altere o componente "create-stock.component.ts" conforme abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from 'app/model/stock';

                @Component({
                    selector: 'app-create-stock',
                    templateUrl: './create-stock.component.html',
                    styleUrls: ['./create-stock.component.css']
                })

                export class CreateStockComponent {
                    public stock: Stock;
                    public confirmed = false;                                   // Linha inserida

                    constructor() {
                        this.stock = new Stock('test', '', 0, 0, 'NASDAQ');     // Linha alterada
                    } 
                    
                    setStockPrice(price: any) {                                      // Método criado
                        this.stock.price = price;
                        this.stock.previousPrice = price;
                    } 
                    
                    createStock() {                                             // Método criado
                        console.log('Creating stock ', this.stock);
                    }
                }

            . Altere todo conteúdo do coomponente "create-stock.component.html" com o conteúdo abaixo:

                <h2>Create Stock Form</h2>
                <div class="form-group">
                    <form (ngSubmit)="createStock()">
                        <div class="row">
                            <div class="col-4">
                                <label for="stockName">Stock Name</label>
                                <input type="text"
                                        placeholder="Stock Name"
                                        name="stockName"
                                        id="stockName"
                                        class="form-control form-control-sm"
                                        [(ngModel)]="stock.name">
                            </div>
                            <div class="col-4">
                                <label for="stockCode">Stock Code</label>
                                <input type="text"
                                            placeholder="Stock Code"
                                            name="stockCode"
                                            id="stockCode"
                                            class="form-control form-control-sm"
                                            [(ngModel)]="stock.code">
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockPrice">Stock Price</label>
                                    <input type="number"
                                    placeholder="Stock Price"
                                    name="stockPrice"
                                    id="stockPrice"
                                    class="form-control form-control-sm"
                                    [ngModel]="stock.price"
                                    (ngModelChange)="setStockPrice($event)">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mt-2">
                                <div class="form-group">
                                    <label for="stockExchange">Stock Change:&nbsp;&nbsp;</label>
                                    <input type="radio"
                                        name="stockExchange"
                                        class="form-check-input"
                                        [(ngModel)]="stock.exchange"
                                        value="NYSE">NYSE
                                    <input type="radio"
                                        name="stockExchange"
                                        class="form-check-input"
                                        [(ngModel)]="stock.exchange"
                                        value="NASDAQ">NASDAQ
                                    <input type="radio"
                                        name="stockExchange"
                                        class="form-check-input"
                                        [(ngModel)]="stock.exchange"
                                        value="OTHER">OTHER
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mt-2">
                                <input type="checkbox"
                                    name="stockConfirm"
                                    class="form-check-input"
                                    [(ngModel)]="confirmed">
                                    I confirm that the information provided above is accurate!
                            </div>
                        </div>

                        <div class="row" style="padding: 10px;">
                            <div class="col-2">
                                <button [disabled]="!confirmed" class="btn btn-primary" type="submit">Create</button>
                            </div>
                        </div>

                    </form>
                </div>

                <h4>Stock Name is {{stock | json}}</h4>
                <br>
                <h4>confirmed is {{confirmed}}</h4>

            . Execute o projeto e verifique na console do navegador as informações:

                ng s -o

    . Diretivas 

        . Diretivas são instruções que passamos para os templates.

        . Existem 3 tipos de diretivas:

            Componente - que passamos para o template:

                <app-curso></app-curso>

            Estrutural - Podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar a estrutura do DOM.

                <h2 *ngIf="logado">Olá {{nome}}</h2>

                <ul>
                    <li *ngFor="let item of itens">{{ item.nome }}</li>
                </ul>

            Atributo - Podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar a aparência 
                        ou o comportamento de um elemento e não altera a estrutura do DOM.

                <h2 [style.color]="'red'">{{nome}}</h2>

                <div [ngStyle]="{'background-color': 'red', 'color': 'white'}">...</div>

                <div [ngClass]="{'ativo': isAtivo, 'desabilitado': isDesabilitado}">
                    <p>Texto do componente</p>
                    <button (click)="toggleAtivo()">Toggle Ativo</button>
                    <button (click)="toggleDesabilitado()">Toggle Desabilitado</button>
                </div>

        . ngIf

            . É uma diretiva do Angular que permite controlar a exibição de elementos HTML com base em uma condição.

            . Quando utilizamos a diretiva ngIf, podemos especificar uma expressão que será avaliada. Se a expressão for 
                avaliada como verdadeira, o elemento HTML associado à diretiva será exibido. Se a expressão for avaliada 
                como falsa, o elemento HTML não será exibido.

                <!-- HTML -->
                <div *ngIf="condicao">
                    Este elemento será exibido se a condição for verdadeira.
                </div>

                // Typescript
                @Component({
                    selector: 'app-exemplo',
                    templateUrl: './exemplo.component.html',
                    styleUrls: ['./exemplo.component.css']
                })
    
                export class ExemploComponent {
                    condicao = true;
                }

        . Demo - ngIf

            . Altere o conteúdo do arquivo "stock-item.component.html" com o conteúdo abaixo:

                <div class="stock-container">
                    <div class="name">{{stock.name + ' (' + stock.code + ')'}}</div>
                    <div class="price" 
                            [class]="stock.isPositiveChange() ? 'positive' : 'negative'">
                        $ {{stock.price}}
                    </div>

                    <!-- Button Alterado -->
                    <button (click)="toggleFavorite($event)" 
                            *ngIf="!stock.favorite">
                        Add to Favorite
                    </button>
                </div>

            . Altere o conteúdo do componente "app.component.html" pelo abaixo:

                <app-stock-item></app-stock-item>

            . Execute o projeto e verifique o resultado se ao clicar no botão "Add to Favorite" irá desaparecer.

                ng s -o

        . ngFor

            . É uma diretiva do Angular que permite iterar sobre uma coleção de dados e exibir seus elementos em HTML.

                <!-- HTML -->
                <ul>
                    <li *ngFor="let item of itens">{{ item.nome }}</li>
                </ul>

                // Typescript
                @Component({
                  selector: 'app-exemplo',
                  templateUrl: './exemplo.component.html',
                  styleUrls: ['./exemplo.component.css']
                })
                export class ExemploComponent {
                  itens = [
                    { nome: 'Item 1' },
                    { nome: 'Item 2' },
                    { nome: 'Item 3' }
                  ];
                }

        . Demo - ngFor

            . Altere o componente "stock-item.component.ts" com o conteúdo abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from 'src/app/model/stock';

                @Component({
                    selector: 'app-stock-item',
                    templateUrl: './stock-item.component.html',
                    styleUrls: ['./stock-item.component.css']
                })
                export class StockItemComponent implements OnInit {
                    ...
                    public saved: boolean = false;    // Linha inserida

                    ngOnInit(): void {
                        // this.stock = new Stock('Test Stock Company', 'TSC', 85, 80, '');   // Linha eliminida

                        this.onInitStock();                                                     // Linha inserida

                        ...
                    }

                    // Método inserido
                    onInitStock() {
                        this.stock = new Stock('', '', 0, 0, '');
                    }

                    ...

                    // Método inserido
                    onSave() {
                        console.log('We are saving the stock', this.stock);
                        this.onInitStock();
                        this.saved=true;
                    }
                }

            . Atualize o componente "stock-item.component.html" com o conteúdo abaixo:

                <h1>Welcome to stock-item</h1>

                <div class="container">
                    <div class="alert alert-success" role="alert" *ngIf="!saved">
                        Product Name : <strong> {{stock.name}} </strong>
                    </div>

                    <div class="row">
                        <div class="col-2">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>
                                <input type="text" 
                                        class="form-control form-control-sm" 
                                        id="stockCode" name="stockCode" 
                                        [(ngModel)]="stock.code"
                                        (focus)="saved=false">
                            </div>
                        </div>

                        <div class="col-4">
                            <div class="form-group">
                                <label for="stockName">Stock Name</label>
                                <input type="text" 
                                        class="form-control form-control-sm" 
                                        id="stockName" 
                                        name="stockName" 
                                        [(ngModel)]="stock.name">
                            </div>
                        </div>

                        <div class="col-2">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>
                                <input type="number" 
                                        class="form-control form-control-sm" 
                                        id="stockPrice" 
                                        name="stockPrice" 
                                        [(ngModel)]="stock.price">
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>
                                <input type="number"
                                        class="form-control form-control-sm"
                                        id="stockPreviousPrice"
                                        name="stockPreviousPrice"
                                        [(ngModel)]="stock.previousPrice">
                            </div>
                        </div>

                        <div class="col-2">
                            <div class="form-group">
                                <label for="stockExchange">Stock Exchange</label>
                                <select class="form-select form-select-sm" 
                                        id="stockExchange" 
                                        name="stockExchange" 
                                        [(ngModel)]="stock.exchange">
                                    <option value="NYSE" selected>NYSE</option>
                                    <option value="NASDAQ">NASDAQ</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-12">
                            <button type="button" 
                                    class="btn btn-primary" 
                                    (click)="onSave()"
                                    [disabled]="stock.name.length == 0 || stock.code.length == 0">
                                Salvar
                            </button>
                        </div>
                    </div>
                </div>

            . Execute o projeto e verifique através da console do navegador se as informações estão chegando corretamente 
                no componente.

                ng s -o

            . Altere o componente "stock-item.component.ts" com o conteúdo abaixo:

                import { Component, OnInit } from '@angular/core';
                import { Stock } from 'src/app/model/stock';

                @Component({
                    selector: 'app-stock-item',
                    templateUrl: './stock-item.component.html',
                    styleUrls: ['./stock-item.component.css']
                })
                export class StockItemComponent implements OnInit {
                    ...
                    public saved: boolean = false;    

                    // public productsStock: Stock[] = [];               
                    public productsStock: Array<Stock> = [];        // Linha inserida

                    ngOnInit(): void {
                        ...
                    }

                    onInitStock() {
                        ...
                    }

                    toggleFavorite(event: any, index: number) {     // Parametro incluido


                        console.log('We are toggling the favorite state for this stock event.target ', event.target);
                        console.log('We are toggling the favorite state for this stock event.target.value ', event.target.value);
                        console.log('We are toggling the favorite state for this stock index ', index);                             // Linha inserida
                        console.log('We are toggling the favorite state for this stock ', this.productsStock[index]);               // Linha inserida
                    }

                    onSave() {
                        console.log('We are saving the stock', this.stock);
                        this.productsStock.push(this.stock);                // Linha inserida
                        this.onInitStock();
                        this.saved=true;

                    }
                }

            . Insira o trecho abaixo no componente "stock-item.component.html"

                <div class="container">
                    <div class="alert alert-success" role="alert" *ngIf="!saved">
                        Product Name : <strong> {{stock.name}} </strong>
                    </div>

                    <div class="row">
                        ...
                    </div>

                    <div class="row mt-2">
                        ...
                    </div>

                    <!-- Div inserida -->
                    <div class="row" style="margin-top: 20px;" >
                        <div class="col-6" 
                            style="padding-top: 10px; padding-bottom: 10px; border: 1px solid black;"
                            *ngFor="let p of productsStock" >
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Code</p>
                                        <p class="fs-6">{{p.code}}</p>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="form-group">
                                        <p class="fw-bold">Name</p>
                                        <p class="fs-6">{{p.name}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Price</p>
                                        <p class="fs-6">{{p.price}}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Previous Price</p>
                                        <p class="fs-6">{{p.previousPrice}}</p>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Exchange</p>
                                        <p class="fs-6">{{p.exchange}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            . Execute o projeto e verifique através da console do navegador se as informações estão chegando corretamente 
                no componente.

                ng s -o

            . Insira o trecho abaixo no componente "stock-item.component.html"

                <div class="container">
                    <div class="alert alert-success" role="alert" *ngIf="!saved">
                        Product Name : <strong> {{stock.name}} </strong>
                    </div>

                    <div class="row">
                        ...
                    </div>

                    <div class="row mt-2">
                        ...
                    </div>

                    <div class="row" style="margin-top: 20px;" >
                        <div class="col-6" 
                            style="padding-top: 10px; padding-bottom: 10px; border: 1px solid black;"
                            *ngFor="let p of productsStock; index as i" >                               <!-- Incluido "index as i" -->
                            <div class="row">
                                ...
                            </div>
                            <div class="row">
                                ...
                            </div>


                            <!-- Div inserido -->
                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-primary" 
                                            (click)="toggleFavorite($event, i)" >
                                        Choice Item to See Values
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            . Execute o projeto e verifique através da console do navegador se as informações estão chegando corretamente 
                no componente.

                ng s -o

        . É possivel utilizar ngFor e ngIf juntos:

            <div *ngFor="let stock of stocks">
                <div *ngIf="stock.active">
                    {{ stock.favorite }}
                </div>
            </div>



4. Modularizando projetos

    . A medida que a aplicação for crescendo, o AppModule ficará muito grande. Neste
        caso seria interessante criar "features modules", ou modulos de funcionalidades
        para organizar melhor o nosso projeto.

        . Para criar um módulo de funcionalidade: acesse o terminal, acesse a pasta raiz do projeto e 
            digite o comando abaixo:

            ng g m [Nome do Módulo]

            Exemplo:

                ng g m curso

            . Este comando criará uma pasta com o nome do módulo e um arquivo dentro dela com o nome [nome modulo].module.ts:

                import { NgModule } from '@angular/core';
                import { CommonModule } from '@angular/common';

                @NgModule({
                    imports: [
                        CommonModule
                    ],
                    declarations: []
                })
                export class CursoModule { }

                . A diferença entre o módulo de funcionalidade e o de raiz seria que: o de funcionalidade é bem reduzido e somente
                    importa o "CommonModule".

    . Demo

        . Acesse a pasta raiz do projeto e digite o comando abaixo:

            # Irá criar a pasta "contabilidade" dentro da pasta "./src/app"
            ng g m contabilidade

            # Irá criar a pasta "ativo" dentro da pasta "./src/app/contabilidade"
            ng g c ./contabilidade/ativo --module=contabilidade

        . Acesse o ./src/app/contabilidade/contabilidade.module.ts e faça a declaração do componente curso:

            import { NgModule } from '@angular/core';
            import { CommonModule } from '@angular/common';
            import { AtivoComponent } from './ativo/ativo.component';       // Observe que foi feito o import do componente

            @NgModule({
                imports: [
                    CommonModule
                ],
                declarations: [
                    AtivoComponent                                          // Observe que foi feito a declaração do componente
                ],
                exports : [ 
                    AtivoComponent                                          // Insira o bloco "exports"
                ]
            })
            export class ContabilidadeModule { }

        . Acesse a classe src/app/app.module.ts, insira dentro do metadado "imports" o "ContabilidadeModule" e faça o import.

            ...
            import { ContabilidadeModule } from './contabilidade/contabilidade.module';     // Insira o import do module

            @NgModule({
                ...
                imports: [
                    BrowserModule,
                    ContabilidadeModule                                                     // Insira o import do module
                ],
                ...
            })
            export class AppModule { }

        . Acesse o arquivo src/app/app.component.html e inclua a tag abaixo:

            <app-ativo></app-ativo>

        . Execute o projeto e verifique se a modularização deu certo:

            ng serve --open

        . Verifique se a página exibida saiu a mensagem do "Ativo"

5. Input e Output
-----------------

    . Input

        . Representado pelo decorator @Input

        . É usado para passar dados de um componente pai para um componente filho. Ele permite que você defina uma 
            propriedade no componente filho que pode ser atualizada pelo componente pai.

            // componente-pai.component.ts
            import { Component } from '@angular/core';
            
            @Component({
              selector: 'app-componente-pai',
              template: `
                <app-componente-filho [nome]="nomePai"></app-componente-filho>
              `
            })
            export class ComponentePai {
              nomePai = 'João';
            }


            // componente-filho.component.ts
            import { Component, Input } from '@angular/core';
            
            @Component({
              selector: 'app-componente-filho',
              template: `
                <p>Olá, meu nome é {{ nome }}!</p>
              `
            })
            export class ComponenteFilho {
              @Input() nome: string;
            }

        . Algumas coisas importantes a saber sobre o @Input:

            . O @Input é usado para passar dados de um componente pai para um componente filho.

            . A propriedade decorada com @Input deve ser pública.

            . O valor da propriedade pode ser atualizado pelo componente pai a qualquer momento.

            . O componente filho pode usar a propriedade decorada com @Input em sua template ou em seu código TypeScript.

        . Também é possível usar o @Input com alias, o que permite que você defina um nome diferente para a propriedade no 
            componente filho.

            // componente-pai.component.ts
            import { Component } from '@angular/core';
            
            @Component({
              selector: 'app-componente-pai',
              template: `
                <app-componente-filho [nomePai]="nomePai"></app-componente-filho>
              `
            })
            export class ComponentePai {
              nomePai = 'João';
            }



            // componente-filho.component.ts
            import { Component, Input } from '@angular/core';
            
            @Component({
              selector: 'app-componente-filho',
              template: `
                <p>Olá, meu nome é {{ nome }}!</p>
              `
            })
            export class ComponenteFilho {
              @Input('nomePai') nome: string;
            }     

        . Demo

            . Acesse a raiz do projeto e execute o comando abaixo no prompt do SO:

                ng g c stock/stock-card --skip-tests

            . Altere o componente "stock-card.component.ts" com o conteúdo abaixo:

                import { Component, Input } from '@angular/core';
                import { Stock } from 'src/app/model/stock';        // Linha inserida

                @Component({
                    selector: 'app-stock-card',
                    templateUrl: './stock-card.component.html',
                    styleUrls: ['./stock-card.component.css']
                })
                export class StockCardComponent {

                    @Input()                                    // Linha inserida
                    public stockItem!: Stock;                       // Linha inserida
                }

            . Cópie o código HTML abaixo para o arquivo src/app/stock-card/stock-card.component.html

                <div class="card">
                    <img src="https://randomuser.me/api/portraits/women/{{stockItem.code}}.jpg" 
                        class="card-img-top" 
                        style="width: 100%; height: auto;">
                    
                    <div class="card-body">
                        <h5 class="card-title">{{stockItem.name}}</h5>
                        <p class="card-text">
                            R$ {{stockItem.price}} <br>
                            {{ stockItem.exchange}} 
                        </p>
                    </div>
                </div>  

            . Altere o código HTML abaixo no arquivo "stock-item.component.html":

                <div class="container">
                    <div class="alert alert-success" role="alert" *ngIf="!saved">
                        ...
                    </div> 

                    <div class="row">
                        ..
                    </div>

                    <div class="row mt-2">
                        ...
                    </div>

                    <div class="row" style="margin-top: 20px;" >
                        <!--                                        Trecho eliminado
                        <div class="col-6" 
                            style="padding-top: 10px; padding-bottom: 10px; border: 1px solid black;"
                            *ngFor="let p of productsStock; index as i" >           
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Code</p>
                                        <p class="fs-6">{{p.code}}</p>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="form-group">
                                        <p class="fw-bold">Name</p>
                                        <p class="fs-6">{{p.name}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Price</p>
                                        <p class="fs-6">{{p.price}}</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Previous Price</p>
                                        <p class="fs-6">{{p.previousPrice}}</p>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <p class="fw-bold">Exchange</p>
                                        <p class="fs-6">{{p.exchange}}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-primary" 
                                            (click)="toggleFavorite($event, i)" >
                                        Choice Item to See Values
                                    </button>
                                </div>
                            </div>
                        </div>
                        -->

                        <!-- Trecho adicionado -->
                        <div class="col-2" 
                            style="padding-top: 10px; padding-bottom: 10px; "
                            *ngFor="let p of productsStock; index as i" >           
                            <app-stock-card [stockItem]="p"></app-stock-card>
                        </div>
                    </div>
                </div>

            . Execute o projeto e verifique se a modularização deu certo:

                ng serve --open


    . Output

        . É um decorador do Angular que permite que um componente emita eventos para os seus pais ou outros componentes. 
            Ele é usado para criar uma comunicação entre componentes, permitindo que um componente notifique outros 
            componentes sobre mudanças ou ações que ocorreram.

                // Componente filho
                import { Component, Output, EventEmitter } from '@angular/core';

                @Component({
                    selector: 'app-filho',
                    template: `
                        <select (change)="emitirEvento($event)">    <!-- 1 -->
                        <option value="opcao1">Opção 1</option>
                        <option value="opcao2">Opção 2</option>
                        <option value="opcao3">Opção 3</option>
                        </select>
                    `
                })
                export class FilhoComponent {
                    @Output() eventoEmitido = new EventEmitter();

                    emitirEvento(valor: any) {
                        this.eventoEmitido.emit(valor.target.value);    // 1
                        console.log(valor);
                        
                    }
                }


                // Componente pai
                import { Component } from '@angular/core';

                @Component({
                    selector: 'app-pai',
                    template: `
                        <app-filho (eventoEmitido)="tratarEvento($event)"></app-filho>
                    `
                })
                export class PaiComponent {
                    tratarEvento(evento: string) {
                        console.log(evento);
                    }
                }


            . Quando o método this.eventoEmitido.emit(valor); é executado, o seguinte fluxo de eventos ocorre:

                1. Emissão do evento: O método emit() é chamado no objeto eventoEmitido, que é uma instância de EventEmitter. 
                    Isso faz com que o evento seja emitido para os ouvintes registrados.
                
                2. Notificação dos ouvintes: O EventEmitter notifica todos os ouvintes registrados que o evento foi emitido. 
                    Nesse caso, o ouvinte é o componente pai que tem um método tratarEvento() que foi registrado para ouvir o evento.
                
                3. Chamada do método de tratamento: O método tratarEvento() é chamado no componente pai, passando o valor 
                    do evento como parâmetro. Nesse caso, o valor do evento é o valor que foi passado como parâmetro para o método emit().
                
                4. Execução do método de tratamento: O método tratarEvento() é executado no componente pai, processando o 
                    valor do evento e realizando as ações necessárias.

                +------------------+
                |  FilhoComponent  |
                +------------------+
                       |
                       |  emitirEvento()
                       |  this.eventoEmitido.emit(valor)
                       |
                       v
                +----------------+
                |  EventEmitter  |
                +----------------+
                       |
                       |  notificar ouvintes
                       |
                       v
                +----------------+
                |  PaiComponent  |
                +----------------+
                       |
                       |  tratarEvento()
                       |  processar valor do evento
                       |
                       v
                +---------------+
                |  Resultado    |
                +---------------+


        . Demo

            . Altere o conteúdo do arquivo "create-stock.component.ts" com o conteúdo abaixo:

                import { Component, EventEmitter, Output } from '@angular/core';      // Linha alterada
                import { Stock } from 'src/app/model/stock';

                @Component({
                    selector: 'app-create-stock',
                    templateUrl: './create-stock.component.html',
                    styleUrls: ['./create-stock.component.css']
                })
                export class CreateStockComponent {
                    public stock: Stock;                                    
                    public confirmed = false;                                   

                    @Output()                                                // Linha inserida
                    public eventoEmitido = new EventEmitter<Stock>();

                    constructor() {                                         
                        this.stock = new Stock('test', '', 0, 0, 'NASDAQ');     

                    }

                    onSubmit() {
                        console.log(this.stock.name);
                    }

                    onChangeName(event: any) {
                        this.stock.name = event.target.value;
                    }
                    setStockPrice(price: any) {                                      
                        this.stock.price = price;
                        this.stock.previousPrice = price;
                    }

                    createStock() {                                             
                        console.log('Creating stock ', this.stock);
                    }

                    emitirEvento(valor: any) {                          // Método adicionado
                        this.eventoEmitido.emit(valor);    
                        console.log(valor);
                        this.stock = new Stock('test', '', 0, 0, 'NASDAQ');     
                    }


                }

            . Altere o conteúdo do arquivo "create-stock.component.html" conforme abaixo:

                <h2>Create Stock Form</h2>
                <div class="form-group">
                    <!--                                         Linha alterada
                    <form (ngSubmit)="createStock()">
                    -->
                    <form>                                  <!-- Linha alterada -->
                        <div class="stock-name">
                            <input type="text" 
                                    placeholder="Stock Name"
                                    name="stockName" 
                                    [(ngModel)]="stock.name">
                        </div>

                        <div class="stock-code">
                            <input type="text" 
                                    placeholder="Stock Code"
                                    name="stockCode" 
                                    [(ngModel)]="stock.code">
                        </div>

                        <div class="stock-code">
                            <input type="number" 
                                    placeholder="Stock Price"
                                    name="stockPrice" 
                                    [ngModel]="stock.price"
                                    (ngModelChange)="setStockPrice($event)">
                        </div>

                        <div class="stock-exchange">
                            <div>
                                <input type="radio" 
                                        name="stockExchange"
                                        [(ngModel)]="stock.exchange" 
                                        value="NYSE">NYSE
                            </div>
                            
                            <div>
                                <input type="radio" 
                                        name="stockExchange"
                                        [(ngModel)]="stock.exchange" 
                                        value="NASDAQ">NASDAQ
                            </div>

                            <div>
                                <input type="radio" 
                                        name="stockExchange"
                                        [(ngModel)]="stock.exchange" 
                                        value="OTHER">OTHER
                            </div>
                        </div>
                        <div class="stock-confirm">
                            <input type="checkbox" 
                                    name="stockConfirm"
                                    [(ngModel)]="confirmed">
                            I confirm that the information provided above is accurate!
                        </div>

                        <!-- Tag alterada - alterado o método (click) -->

                        <!-- Tag alterada - alterado o método (click) -->
                        <div class="row" style="padding: 10px;">
                            <div class="col-2">
                                <button [disabled]="!confirmed" 
                                        (click)="emitirEvento(stock)"
                                        class="btn btn-primary" 
                                        type="submit">
                                    Create
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <h4>Stock Name is {{stock | json }}</h4>
                <br>
                <h4>confirmed is {{confirmed}}</h4>

            . Altere o componente "app.component.html" com o conteúdo abaixo:

                <app-create-stock></app-create-stock>

            . Execute o projeto e verifique se o model "stock" está chegando com sucesso no objeto "create-stock.component.ts" na
                console do navegador:

                ng serve --open

            . Execute o comando abaixo na pasta raiz do projeto:

                ng g c stock/create-stock-item --skip-tests

            . Altere o conteúdo do componente "create-stock-item.component.ts" conforme abaixo:

                import { Component } from '@angular/core';
                import { Stock } from 'src/app/model/stock';

                @Component({
                    selector: 'app-create-stock-item',
                    templateUrl: './create-stock-item.component.html',
                    styleUrls: ['./create-stock-item.component.css']
                })

                export class CreateStockItemComponent  {
                    public stocksItem: Array<Stock> = [];

                    onSave(stock: Stock) {
                        console.log('We are saving the stock', stock);
                        this.stocksItem.push(stock);
                    }
                }

            . Altere o conteúdo do arquivo "create-stock-item.component.html" com o conteúdo abaixo:

                <app-create-stock (eventoEmitido)="onSave($event)"></app-create-stock>

            . Altere o conteúdo do componente "app.component.ts" pelo conteúdo abaixo:

                <app-create-stock-item></app-create-stock-item>

            . Execute o projeto e verifique se o model "stock" está chegando com sucesso no objeto "create-stock-item.component.ts":

                ng serve --open

6. Ciclo de vida dos componentes do Angular
-------------------------------------------

    . O Angular primeiro chamará o construtor para qualquer componente e, em seguida, as
        várias etapas mencionadas anteriormente em ordem. Algumas delas, como OnInit
        e AfterContentInit (basicamente, qualquer método/evento do ciclo de vida terminando com Init)
        são chamadas apenas uma vez, quando um componente é inicializado, enquanto as outras são
        chamadas sempre que qualquer conteúdo muda. O método OnDestroy também é chamado
        apenas uma vez para um componente.

    . Cada uma dessas etapas do ciclo de vida vem com uma interface que deve ser
        implementada quando um componente se importa com aquele ciclo de vida específico, e
        cada interface fornece uma função começando com ng que precisa ser
        implementada. 
        
        . Por exemplo, a etapa do ciclo de vida OnInit precisa de uma função
            chamada ngOnInit para ser implementada no componente e assim por diante.

    . É um conjunto de métodos que são chamados em diferentes estágios do ciclo de vida de um componente, conhecidas como "Hook". 
        Aqui está uma visão geral dos principais Hooks/métodos do ciclo de vida:

        . ngOnChanges: Chamado quando as propriedades de entrada do componente são atualizadas.

        . ngOnInit: Chamado após a inicialização do componente, quando as propriedades de entrada estão disponíveis.

        . ngDoCheck: Chamado após a inicialização do componente e após cada atualização das propriedades de entrada.

        . ngAfterContentInit: Chamado após a inicialização do conteúdo do componente.

        . ngAfterViewInit: Chamado após a inicialização da view do componente.

        . ngAfterViewChecked: Chamado após a verificação da view do componente.

        . ngOnDestroy: Chamado antes da destruição do componente.

    . Representação visual da sequência de execução

        +---------------+
        |  Constructor  |
        +---------------+
            |
            |
            v
        +---------------+
        |  ngOnChanges  |
        +---------------+
            |
            |
            v
        +---------------+
        |  ngOnInit     |
        +---------------+
            |
            |
            v
        +---------------+
        |  ngDoCheck    |
        +---------------+
            |
            |
            v
        +--------------------+
        | ngAfterContentInit |
        +--------------------+
            |
            |
            v
        +------------------+
        | ngAfterViewInit  |
        +------------------+
            |
            |
            v
        +--------------------+
        | ngAfterViewChecked |
        +--------------------+
            |
            |
            v
        +---------------+
        |  ngOnDestroy  |
        +---------------+

    . Demo - Ciclo de vida dos componentes do Angular

        . Implemente todo o conteúdo do componente  "app.component.ts" pelo abaixo:

            import {
                Component, SimpleChanges, OnInit, OnChanges, OnDestroy,
                DoCheck, AfterViewChecked, AfterViewInit,
                AfterContentChecked,
                AfterContentInit
            } from '@angular/core';                                 

            import { Stock } from './model/stock';

            @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.css']
            })

            export class AppComponent implements OnInit, OnChanges, OnDestroy,
                DoCheck, AfterContentChecked,
                AfterContentInit,
                AfterViewChecked,
                AfterViewInit {

                title = 'app works!';
                public stock!: Stock;

                onToggleFavorite(stock: Stock) {
                    console.log('Favorite for stock ', stock, ' was triggered');
                    this.stock.favorite = !this.stock.favorite;
                }
                ngOnInit(): void {
                    this.stock = new Stock('Test Stock Company', 'TSC', 85, 80, '');
                    console.log('App Component - On Init');
                } 
                
                ngAfterViewInit(): void {
                    console.log('App Component - After View Init');
                } 
                
                ngAfterViewChecked(): void {
                    console.log('App Component - After View Checked');
                } 
                
                ngAfterContentInit(): void {
                    console.log('App Component - After Content Init');
                } 
                
                ngAfterContentChecked(): void {
                    console.log('App Component - After Content Checked');
                } 
                
                ngDoCheck(): void {
                    console.log('App Component - Do Check');
                } 
                
                ngOnDestroy(): void {
                    console.log('App Component - On Destroy');
                } 
                
                ngOnChanges(changes: SimpleChanges): void {
                    console.log('App Component - On Changes - ', changes);
                }
            }

        . Execute o projeto e vejo o log de execução na console do navegador:

            ng s -o

7. Mecânismos para se trabalhar com formulários no Angular
----------------------------------------------------------

    . Existem dois mecanismos principais para trabalhar com formulários no Angular: Template-Driven Forms e Reactive Forms.

        . Template-Driven Forms

            . Nesse mecanismo, os formulários são criados usando diretivas no template HTML. As diretivas são usadas para vincular os 
                campos do formulário a propriedades do componente.

            . Vantagens:

                . Fácil de usar e entender

                . Não requer conhecimento de Observables ou RxJS

                . Pode ser usado com validação de formulário


            . Desvantagens:

                . Não é tão flexível quanto os Reactive Forms

                . Não é possível usar validação de formulário personalizada

                . Não é possível usar formulários aninhados

            . Exemplo

                <!-- HTML -->
                <form #form="ngForm" (ngSubmit)="submitForm(form)">
                    <div>
                        <label for="nome">Nome:</label>
                        <input  type="text" 
                                id="nome" 
                                name="nome" 
                                [(ngModel)]="usuario.nome" 
                                required 
                                minlength="3" 
                                maxlength="50">

                        <div *ngIf="form.controls.nome?.invalid && (form.controls.nome?.dirty || form.controls.nome?.touched)">
                            <div *ngIf="form.controls.nome?.errors?.required">
                                O nome é obrigatório.
                            </div>
                            <div *ngIf="form.controls.nome?.errors?.minlength">
                                O nome deve ter pelo menos 3 caracteres.
                            </div>
                            <div *ngIf="form.controls.nome?.errors?.maxlength">
                                O nome deve ter no máximo 50 caracteres.
                            </div>
                        </div>
                    </div>

                    <div>
                        <label for="email">E-mail:</label>
                        <input  type="email" 
                                id="email" 
                                name="email" 
                                [(ngModel)]="usuario.email" 
                                required 
                                email>
                        <div *ngIf="form.controls.email?.invalid && (form.controls.email?.dirty || form.controls.email?.touched)">
                            <div *ngIf="form.controls.email?.errors?.required">
                                O e-mail é obrigatório.
                            </div>
                            <div *ngIf="form.controls.email?.errors?.email">
                                O e-mail deve ser válido.
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" [disabled]="!form.valid">Enviar</button>
                </form>



                // Typescript
                import { Component } from '@angular/core';
                
                @Component({
                selector: 'app-exemplo',
                templateUrl: './componente.html'
                })
                export class ExemploComponent {
                usuario = {
                    nome: '',
                    email: ''
                };
                
                submitForm(form: any) {
                    if (form.valid) {
                    console.log('Formulário válido:', form.value);
                    } else {
                    console.log('Formulário inválido:', form.value);
                    }
                }
                }

        . Reactive Forms

            . Nesse mecanismo, os formulários são criados usando classes e métodos no componente. As classes são usadas para criar formulários reativos que podem ser manipulados programaticamente.

            . Vantagens:

                . Mais flexível do que os Template-Driven Forms

                . Permite validação de formulário personalizada

                . Permite formulários aninhados

                . Pode ser usado com Observables e RxJS


            . Desvantagens:

                . Mais complexo do que os Template-Driven Forms

                . Requer conhecimento de Observables e RxJS

                . Pode ser mais difícil de usar para desenvolvedores iniciantes

            . Exemplo

                import { FormGroup, FormControl, Validators } from '@angular/forms';

                @Component({
                    selector: 'app-exemplo',
                    template: `
                        <form [formGroup]="form">
                            <input type="text" formControlName="nome">
                            <input type="email" formControlName="email">
                            <button type="submit">Enviar</button>
                        </form>
                    `
                })

                export class ExemploComponent {
                    form = new FormGroup({
                        nome: new FormControl('', Validators.required),
                        email: new FormControl('', Validators.email)
                    });
                }

    . Template-Driven Forms

        . Diretiva "ngForm"

            . É uma diretiva do Angular que é usada para criar um formulário que pode ser validado e enviado. Ela é parte 
                do módulo FormsModule do Angular.

            . Quando você usa a diretiva ngForm em um formulário, o Angular cria um objeto FormGroup que representa o 
                formulário e seus campos. Esse objeto pode ser usado para validar o formulário e enviar os dados p
                ara o servidor.

            . Gerenciamento de Formulário**: A diretiva `ngForm` atua como um controlador para o formulário, permitindo que 
                o Angular rastreie o estado dos campos, como se eles estão válidos ou inválidos, sujos ou limpos, e se foram 
                tocados ou não. Isso é essencial para a validação e manipulação dos dados do formulário.

            . Referência ao Formulário**: Quando você usa `ngForm` em um elemento `<form>`, pode criar uma referência local a 
                ele usando a sintaxe `#nomeDaVariavel="ngForm"`. Isso permite acessar propriedades do formulário diretamente 
                no template, como `valid`, `invalid`, `dirty`, e `pristine`.

            . Submissão de Formulário**: A diretiva facilita a submissão do formulário através do evento `(ngSubmit)`, que é 
                disparado quando o formulário é enviado. Você pode vincular esse evento a um método no seu componente para 
                processar os dados do formulário.

            . A diretiva faz parte da biblioteca "FormsModule", portanto é preciso importa-la no módulo do formulário que
                pretendemos utilizar a diretiva "NgForm". Vide ponto abaixo como fazer:

            . Exemplo

                // *.component.html
                <form #form="ngForm" (ngSubmit)="onSubmit()" >
                    <input type="text"
                            name="cpfCnpj"
                            [(ngModel)]="cpfCnpj"
                            [required]="true"
                            placeholder="Informe o CPF do cliente">
                    <br>
                    <input type="text"
                            name="nome"
                            [(ngModel)]="nome"
                            [required]="true"
                            placeholder="Informe o nome do cliente">
                    <br>
                    <button type="submit" [disabled]="!form.valid">Enviar</button>
                    <!-- <button type="submit" >Enviar</button> -->
                </form>

                // *.component.ts
                import { Component } from '@angular/core';

                @Component({
                    selector: 'app-acordo',
                    templateUrl: './acordo.component.html',
                    styleUrls: ['./acordo.component.scss']
                })
                export class AcordoComponent {
                    cpfCnpj = '';
                    nome = '';

                    onSubmit() {
                        console.log(this.cpfCnpj);
                        console.log(this.nome);
                    }
                }

                // *.modules.ts
                ...
                import { FormsModule } from '@angular/forms';   // Declaração do FormsModule

                @NgModule({
                    ...
                    imports: [
                        FormsModule                             // Importação do FormsModule
                    ],
                    ...
                })
                export class FinanceiroModule { }

        . Diretiva "ngModel"

            . Integração com ngModel**: A diretiva `ngForm` trabalha em conjunto com a diretiva `ngModel`, que é utilizada 
                para criar controles de entrada vinculados ao modelo de dados. Cada campo de entrada que utiliza `ngModel` 
                será automaticamente registrado no controlador de formulário gerenciado pelo `ngForm`, permitindo que os 
                dados sejam coletados e validados facilmente.

            . A diretiva "ngModel" faz parte da biblioteca "FormsModule", portanto é preciso importa-la no módulo do formulário que
                pretendemos utilizar a diretiva. 
                
            . A diretiva "ngModel" irá configurar o estado do objeto, dizendo se ele está válido, ou inválido, de acordo com suas
                validações (required, minlength, range, etc.)

                . Aqui estão algumas das propriedades dos elementos do formulário (inputs) que são usadas para validação:

                    . valid: indica se o campo de formulário é válido ou não.

                    . invalid: indica se o campo de formulário é inválido ou não.

                    . dirty: indica se o campo de formulário foi modificado pelo usuário ou não.

                    . touched: indica se o campo de formulário foi tocado pelo usuário ou não.

                    . errors: retorna um objeto com as mensagens de erro para o campo de formulário.

                    . pristine: retorna se o usuário não fez nenhuma alteração no valor do campo desde que o formulário foi carregado.

            . Sempre que utilizarmos a diretiva "ngModel" precisamos ter identificar o elemento com o atributo "name=...".

            . Exemplo

                // *.component.html
                <form #form="ngForm" (ngSubmit)="onSubmit()" >
                    <input type="text"
                            name="cpfCnpj"
                            ngModel
                            [(ngModel)]="cpfCnpj"
                            [required]="true"
                            placeholder="Informe o CPF do cliente">
                    <br>
                    <input type="text"
                            name="nome"
                            ngModel
                            [(ngModel)]="nome"
                            [required]="true"
                            ngModel
                            placeholder="Informe o nome do cliente">
                    <br>
                    <button type="submit" [disabled]="!form.valid">Enviar</button>
                    <!-- <button type="submit" >Enviar</button> -->
                </form>



        . Variáveis de referência 
        
            . São usadas para vincular um elemento do template a uma variável no componente. Isso permite que você acesse o 
                elemento do template no componente e faça operações com ele.

            . As variáveis de referência são definidas no template usando o símbolo # seguido do nome da variável. Por exemplo:

                <input #nome type="text">

            . A variável de referência nome é definida e vinculada ao elemento input do tipo text.

                . No componente, você pode acessar a variável de referência usando o nome da variável. Por exemplo:

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

                    @Component({
                        selector: 'app-example',
                        template: `
                                <input #nome type="text">
                                <button (click)="mostrarValor(nome.value)">Mostrar valor</button>
                            `
                    })
                    export class ExampleComponent {
                        mostrarValor(valor: string) {
                            console.log(valor);
                        }
                    }

        . Demo "Template-Driven Forms"

            . Altere o componente "stock-item.component.html" com o conteúdo abaixo:

                <h1>Welcome to stock-item</h1>

                <div class="container">
                    <div class="alert alert-success" role="alert" *ngIf="!saved">
                        Product Name : <strong> {{stock.name}} </strong>
                    </div>

                    <!-- Tag <form. inserida -->

                    <form #stockForm="ngForm" (ngSubmit)="onSave()">
                        <div class="row">
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="stockCode">Stock Code</label>

                                    <!-- Atribute [required] inserido -->
                                    <input type="text"
                                            class="form-control form-control-sm"
                                            id="stockCode" name="stockCode"
                                            [required]="true"
                                            [(ngModel)]="stock.code"
                                            (focus)="saved=false">
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockName">Stock Name</label>

                                    <!-- Atribute [required] inserido -->
                                    <input type="text"
                                            class="form-control form-control-sm"
                                            id="stockName"
                                            name="stockName"
                                            required 
                                            minlength="3" 
                                            maxlength="15"
                                            [(ngModel)]="stock.name">
                                </div>
                            </div>

                            <!-- Atribute [required, min ] inserido -->
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="stockPrice">Stock Price</label>
                                    <input type="number"
                                            class="form-control form-control-sm"
                                            id="stockPrice"
                                            name="stockPrice"
                                            min="1"
                                            required
                                            [(ngModel)]="stock.price">
                                </div>
                            </div>

                            <!-- Atribute [required, min ] inserido -->
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="stockPreviousPrice">Stock Previous Price</label>
                                    <input type="number"
                                            class="form-control form-control-sm"
                                            id="stockPreviousPrice"
                                            name="stockPreviousPrice"
                                            min="1"
                                            required
                                            [(ngModel)]="stock.previousPrice">
                                </div>
                            </div>

                            <div class="col-2">
                                <div class="form-group">
                                    <label for="stockExchange">Stock Exchange</label>
                                    <select class="form-select form-select-sm" 
                                        id="stockExchange" 
                                        name="stockExchange"
                                        [required]="true"
                                        [(ngModel)]="stock.exchange">
                                        <option value="NYSE" selected>NYSE</option>
                                        <option value="NASDAQ">NASDAQ</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-12">

                                <!-- Tag button eliminado -->
                                <!--
                                <button type="button" class="btn btn-primary" (click)="onSave()"
                                    [disabled]="stock.name.length == 0 || stock.code.length == 0">
                                -->

                                <!-- Tag button submit inserida -->
                                <button type="submit"
                                        class="btn btn-primary"
                                        [disabled]="stockForm.invalid">
                                    Salvar
                                </button>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 20px;">
                            <div class="col-2" style="padding-top: 10px; padding-bottom: 10px; "
                                *ngFor="let p of productsStock; index as i">
                                <app-stock-card [stockItem]="p"></app-stock-card>
                            </div>
                        </div>
                    </form>
                </div>

            . Inseri a tag abaixo no componente "app.component.ts"

                <app-stock-item></app-stock-item>

            . Execute a aplicação e verifique se o botão ficará habilitado caso as validações dos campos sejam atendidas:

                ng s -o

        . Validação de Formulários:

            . Recordando, abaixo a relação de validações permitidas no HTML:

                Regra	            Validação
                ------              ---------
                email	            Se definido como true, o campo só aceitará e-mails válidos;
                required	        Se definido como true, o campo é de preenchimento obrigatório;
                min	                Define um número ou valor mínimo válido. Por exemplo, se definimos como 4, o usuário só poderá 
                                    informar um número maior igual a 4. Abaixo disso a informação é inválida;
                max	                Define um número ou valor máximo válido. Por exemplo, se definimos como 10, o usuário só poderá 
                                    informar um número que seja menor ou igual a 10. Acima disso a informação é inválida;
                range	            Determina um intervalo, contendo um valor mínimo e máximo válido. Por exemplo, se definirmos 
                                    como [10, 20], o usuário só poderá informar um número que seja maior ou igual a 10 e menor ou 
                                    igual a 20;
                minlength	        Determina uma quantidade mínima de caracteres. Por exemplo, se definirmos como 10, o usuário só 
                                    poderá informar um valor com no mínimo 10 caracteres. Abaixo disso a informação é inválida;
                maxlength	        Define uma quantidade máxima de caracteres. Por exemplo, se definirmos como 5, o usuário só 
                                    poderá informar um valor com no máximo 5 caracteres. Acima disso a informação é inválida;
                rangelength	        Define um intervalo, contendo uma quantidade mínima e máxima de caracteres válidos. Por exemplo, 
                                    se definirmos como [2, 6], o usuário só poderá informar um valor com nomínimo 2 e no máximo 6 
                                    caracteres;
                url	                Se definido como true, o campo só aceitará URLs válidas;
                date	            Se definido como true, o campo só aceitará datas válidas;
                dateISO	            Caso definido como true, o input só aceitará datas no formato ISO;
                number	            Caso definido como true, o input só aceitará números inteiros ou decimais;
                digits	            Caso definido como true, o input só permitirá dígitos;
                creditcard	        Se definido como true, o input só permitirá número de cartão de crédito válido;
                remote	            Caso defina uma URL de verificação, por exemplo “verificar_se_existe_cpf.php”. Então o Validation 
                                    realiza uma verificação remota com a url e com o valor informado no campo, assim, se a resposta para 
                                    a requisição de validação for false, então o Validation entende que a informação no campo não é válida, 
                                    agora caso a resposta for true então a informação é válida. Por exemplo: verificar se o CFP já existe 
                                    na aplicação;
                equalTo	            Verifica se o valor dois campos são iguais. Por exemplo: Verificar se as senhas são iguais, no cenário 
                                    de inserir uma senha e repetir a senha novamente.
                accept	            Esta regra é utilizada para o campo “input= file” para upload de arquivo, onde podemos definir quais 
                                    mime-types são permitidos. Por exemplo, se definimos esta regra com o valor “audio/*”, então estamos 
                                    dizendo ao Validation que só é permitido apenas arquivos de áudio;
                extension	        Nesta regra podemos definir uma certa extensão de arquivo que poderá ser aceito;
                phoneUs	            Se definido como true, o campo só aceitará valor de telefone válido dos EUA
                require_from_group  Garante que pelo o menos um campo deve ser válido dentro de um grupo de campos.

            . Através do "ngForm" e "ngModel" podemos integrar a validação de formulário do HTML com o Angular.

            . "noPropertyAccessFromIndexSignature": essa propriedade encontra-se no arquivo "tsconfig.json", é usada para controlar como o 
                TypeScript lida com a acessibilidade de propriedades em objetos que têm uma assinatura de índice (index signature).
                Quando essa propriedade é definida como true, o TypeScript não permite que você acesse propriedades em objetos que têm uma 
                assinatura de índice usando a sintaxe de ponto (.). Em vez disso, você precisa usar a sintaxe de colchetes ([]) para acessar 
                as propriedades.


                <!-- Como utilizar as propriedade dos objetos quando estiver configurado "noPropertyAccessFromIndexSignature: true" -->
                <div *ngIf="stockName.errors && stockName.errors['required']">
                    Stock Name is Mandatory
                </div>                 


                <!-- Como utilizar as propriedade dos objetos quando estiver configurado "noPropertyAccessFromIndexSignature: false" -->
                <div *ngIf="stockName?.errors?.required">
                    Stock Name is Mandatory
                </div>                 

            . No "Template-Driven Forms" definimos as propriedades do formulário no modelo HTML e o Angular cuida da validação e do 
                gerenciamento dos dados:

                <form #form="ngForm" (ngSubmit)="submitForm(form)">
                <label>Nome:</label>                  
                <input type="text" name="nome" ngModel required>  <!-- atributo de validação "required" -->

                <!-- "form.controls.nome?.invalid" -> Valida o estado do controle do formulário -->
                <!-- "form.controls.nome?.dirty" e "form.controls.nome?.touched" -> Valida o estdo do controle -->
                <!-- "form.controle.nome?.errors?.required" valida o conteúdo do controle do formulário -->

                <div *ngIf="form.controls.nome?.invalid && (form.controls.nome?.dirty || form.controls.nome?.touched)">
                    <div *ngIf="form.controls.nome?.errors?.required">
                    O nome é obrigatório.
                    </div>
                </div>

                <!-- "!form.valid" -> Valida o estado do formulário -->
                <button type="submit" [disable]="!form.valid">Enviar</button>
                </form>

            . No "Reactive Forms" utilizamos o "FormControl" e o "FormGroup" para criar formulários. Você define as propriedades do formulário 
                no componente e o Angular cuida da validação e do gerenciamento dos dados.

                import { Component } from '@angular/core';
                import { FormGroup, FormControl, Validators } from '@angular/forms';
                
                @Component({
                selector: 'app-form',
                template: `
                    <form [formGroup]="form" (ngSubmit)="submitForm()">
                    <label>Nome:</label>
                    <input formControlName="nome" type="text">
                    <button type="submit" [disabled]="!form.valid">Enviar</button>
                    </form>
                `
                })
                export class FormComponent {

                    // Objetos FormControl e FormGroup para gerenciar os estados dos formulários
                    // associado com a diretiva do formulário "[formGroup]='form'"
                    form = new FormGroup({
                        nome: new FormControl('', Validators.required)
                    });
                    
                    submitForm() {
                        if (this.form.valid) {              // Verifica o estado do formulário.
                        // código para enviar o formulário
                        }
                    }
                }

            . O ngModel pode alterar o CSS dos elementos HTML na validação usando as seguintes técnicas:

                . Classes de validação: O ngModel adiciona classes de validação aos elementos HTML quando eles são válidos ou inválidos. 
                                        As classes de validação mais comuns são:

                    . ng-valid: adicionada quando o elemento é válido.

                    . ng-invalid: adicionada quando o elemento é inválido.

                    . ng-dirty: adicionada quando o elemento foi modificado pelo usuário.

                    . ng-touched: adicionada quando o elemento foi tocado pelo usuário.

            . Estilos condicionais: O ngModel pode ser usado para aplicar estilos condicionais aos elementos HTML com base na validação. 

                <!-- HTML -->
                <input type="text" [(ngModel)]="nome" required>
                <div [class.ng-invalid]="nome.invalid && nome.dirty">O nome é obrigatório.</div>


                <input type="text" [(ngModel)]="nome" required>
                <div [ngClass]="{'ng-invalid': nome.invalid && nome.dirty}">O nome é obrigatório.</div>


                /* CSS */
                .ng-invalid {
                border: 1px solid red;
                background-color: #f2dede;
                }
                
                .ng-valid {
                border: 1px solid green;
                background-color: #dff0d8;
                }

            . Exemplo - Template-Driven Forms

                <form #form="ngForm">
                    <label for="nome">Nome:</label>
                    <input type="text" id="nome" name="nome" [(ngModel)]="nome" required minlength="3" maxlength="50">
                    
                    <div *ngIf="nome.invalid && (nome.dirty || nome.touched)">
                        <div *ngIf="nome.errors.required">
                            O nome é obrigatório.
                        </div>

                        <div *ngIf="nome.errors.minlength">
                            O nome deve ter pelo menos 3 caracteres.
                        </div>

                        <div *ngIf="nome.errors.maxlength">
                            O nome deve ter no máximo 50 caracteres.
                        </div>
                    </div>
                </form>

        . Demo - Template-Driven Forms

            . Insira as linhas abaixo no arquivo "create-stock.component.html":

                <h2>Create Stock Form</h2>
                <div class="form-group">
                    <form #form="ngForm" (ngSubmit)="createStock(form)">               <!-- Tag form alterada -->
                        <div class="row">
                            <div class="col-3">
                                <label for="stockName">Stock Name</label>

                                <!-- Atributo "required" inserido -->

                                <input type="text"
                                        placeholder="Stock Name"
                                        name="stockName"
                                        id="stockName"
                                        required
                                        minlength="3"
                                        autocomplete="off"
                                        class="form-control form-control-sm"
                                        [(ngModel)]="stock.name">
                            </div>
                            <div class="col-3">
                                ...
                            </div>
                            <div class="col-3">
                                ...
                            </div>

                            <div class="col-3 mt-4">
                                ...
                            </div>
                            <div class="row">
                                ...
                            </div>

                            <div class="row" style="padding: 10px;">
                                <div class="col-2">

                                    <!-- diretiva "[disabled]" alterada e event binding "(click)" alterado
                                    <button [disabled]="!form.valid" 
                                            class="btn btn-primary" 
                                            type="submit">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <h4>Stock Name is {{stock | json}}</h4>
                <br>
                <h4>confirmed is {{confirmed}}</h4>

            . Altere o componente "create-stock.component.ts" como abaixo:

                // Método alterado
                createStock( form: any){
                    console.log("Stock Form: ", form);
                    console.log("Stock Name: ", form.controls.stockName.value);
                }

            . Altere o conteúdo do arquivo "app.component.html" pelo abaixo:

                <app-create-stock></app-create-stock>

            . Execute o projeto e verifique se o formulário está validando o estado do formulário em função da obrigatoriedade do 
                preenchimento do campo "Stock Name". Verifique o resultado apresentado na console do navegador:

                ng s -o

            . Altere a propriedade "noPropertyAccessFromIndexSignature" para "false" no arquivo "tsconfig.json":

                {
                    ...,
                    "compilerOptions": {
                        "noPropertyAccessFromIndexSignature": false,
                        ...
                    }
                    ...
                },
                ...

            . Insira as linhas abaixo no arquivo "create-stock.component.html":

                <h2>Create Stock Form</h2>
                <div class="form-group">
                    <form #form="ngForm"  (ngSubmit)="createStock(form)>    
                        <div class="row">
                            <div class="col-3">
                                <label for="stockName">Stock Name</label>

                                <!-- Atributo "#stockName="ngModel" inserido -->
                                <input type="text"
                                        placeholder="Stock Name"
                                        name="stockName"
                                        id="stockName"
                                        required
                                        minlength="3"
                                        #stockName="ngModel"
                                        autocomplete="off"
                                        class="form-control form-control-sm"
                                        [(ngModel)]="stock.name">

                            <!-- div inserida no lugar da alterada -->  
                            <div *ngIf="stockName.errors?.required">
                                Stock Name is Mandatory
                            </div>                 

                            <!-- div inserida no lugar da alterada -->
                            <div *ngIf="stockName.errors?.minlength">
                                Minimum length Stock Name will be 3 characteres
                            </div>                 

                            </div>
                            <div class="col-3">
                                ...
                            </div>
                            <div class="col-3">
                                ...
                            </div>

                            <div class="col-3 mt-4">
                                ...
                            </div>
                            <div class="row">
                                ...
                            </div>

                            <div class="row" style="padding: 10px;">
                                <div class="col-2">
                                    <button [disabled]="!form.valid" 
                                            class="btn btn-primary" 
                                            type="submit">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <h4>Stock Name is {{stock | json}}</h4>
                <br>
                <h4>confirmed is {{confirmed}}</h4>

            . Execute o projeto e verifique se as mensagems informativas de validação estão aparecendo 

                ng s -o

        . Controle de estado dos elementos de entrada do formulário

            . O estado, que nos permite espiar o estado do controle de formulário, se o usuário o visitou, se o usuário o
                alterou e, finalmente, se ele está em um estado válido.

                . valid: indica se o campo de formulário é válido ou não.

                . invalid: indica se o campo de formulário é inválido ou não.

                . dirty: indica se o campo de formulário foi modificado pelo usuário ou não.

                . touched: indica se o campo de formulário foi tocado pelo usuário ou não.

                . errors: retorna um objeto com as mensagens de erro para o campo de formulário.

            . A validade, que nos diz se um controle do formulário é válido ou não, e se não for válido, o motivo subjacente 
                (ou motivos) pelo qual o elemento de formulário é inválido.

        . Demo - Template-Driven Forms

            . Insira as linhas abaixo no arquivo "create-stock.component.css":

                .error-message {
                    color: red;
                    font-size: 12px;
                    margin-top: 5px;
                }

                input.invalid {
                    border: 1px solid #f00;
                }

            . Faça as alteração abaixo no componente "create-stock.component.html"

                <h2>Create Stock Form</h2>
                <div class="form-group">
                    <form #form="ngForm"  (ngSubmit)="createStock(form)>               
                        <div class="row">
                            <div class="col-3">
                                <label for="stockName">Stock Name</label>

                                <!-- Inserido o diretiva de class [ngClass], id, ngModel e placeholder-->

                                <input type="text"
                                        placeholder="Stock Name"
                                        name="stockName"
                                        id="stockName"
                                        name="stockName"
                                        required
                                        minlength="3"
                                        ngModel
                                        #stockName="ngModel"
                                        [ngClass]="{'invalid': stockName.invalid && (stockName.dirty || stockName.touched), 'form-control.form-control-sm': stockName.valid}"
                                        class="form-control form-control-sm"
                                        autocomplete="off"
                                        [(ngModel)]="stock.name"> 

                                <!-- Div inserida -->
                                <div *ngIf="stockName.invalid && (stockName.dirty || stockName.touched)"
                                        [ngClass]="{'error-message': stockName.invalid && (stockName.dirty || stockName.touched) }">
                                    <div *ngIf="stockName.errors?.required">
                                        * Stock Name is Mandatory
                                    </div>                 

                                    <div *ngIf="stockName.errors?.minlength">
                                        * Minimum length Stock Name will be 3 characteres
                                    </div>     
                                </div>            
                            </div>
                            <div class="col-3">
                                ...
                            </div>
                            <div class="col-3">
                                ...
                            </div>

                            <div class="col-3 mt-4">
                                ...
                            </div>
                            <div class="row">
                                ...
                            </div>

                            <div class="row" style="padding: 10px;">
                                <div class="col-2">
                                    <button [disabled]="!form.valid" 
                                            class="btn btn-primary" 
                                            type="submit">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <h4>Stock Name is {{stock | json}}</h4>
                <br>
                <h4>confirmed is {{confirmed}}</h4>

            . Execute o projeto e verifique se as mensagems informativas de validação estão aparecendo, 
                verifique o a caixa de entrada ficou em destaque

                ng s -o

    . Reactive Forms 

        . Diferentemente do mecanismo Template-Driven Forms, nos formulários reativos podemos definir
            a árvore inteira de objetos das entradas do formulário no código do seu componente
            e então os vincula-los aos componentes do formulário nativo. 

        . Como você cria toda a árvore de controle de formulário no componente, você tem acesso a ela imediatamente e
            não precisa lidar com o ciclo de vida assíncrono do Angular

        . Primeira coisa a ser feita para trabalharmos com Reactive Forms e importar a biblioteca "ReactiveFormsModule"
            no componente "app.module.ts"

            ...
            // Importação da biblioteca
            import { ReactiveFormsModule } from '@angular/forms';
            ...

            @NgModule({
            declarations: [
                AppComponent,
                StockItemComponent,
                CreateStockComponent
            ],
            imports: [
                    BrowserModule,
                    ReactiveFormsModule,            // Importação da biblioteca
                ],
                providers: [],
                bootstrap: [AppComponent]
            })
            export class AppModule { }

        . Form Control

            . [formControl] é uma diretiva que permite vincular um controle de formulário a um elemento HTML. Ela é usada para 
                criar um controle de formulário que pode ser usado para coletar dados do usuário e validar esses dados.

                <input [formControl]="nomeFormControl">

            . A classe "FormControl" é usada para criar um controle de formulário individual. Mais a frente veremos que essa classe
                servirá principalmente para vincular o objeto de entrada com suas validações.           

                ...
                export class ExemploComponent {
                    nomeFormControl = new FormControl('');
                }

            . A diferença entre a diretiva [formControl] e a classe FormControl é que a diretiva [formControl] é usada para vincular 
                um controle de formulário a um elemento HTML, enquanto a classe FormControl é usada para criar um controle de 
                formulário individual.

        . Demo

            . Execute o comando abaixo na pasta raiz do projeto:

                 ng g c stock/create-product-item --skip-tests  

            . Insira as linhas abaixo no arquivo "app.module.ts"

                import { NgModule } from '@angular/core';
                import { BrowserModule } from '@angular/platform-browser';

                import { AppRoutingModule } from './app-routing.module';
                import { AppComponent } from './app.component';
                import { StockItemComponent } from './stock/stock-item/stock-item.component';
                import { CreateStockComponent } from './stock/create-stock/create-stock.component';
                import { FormsModule } from '@angular/forms';
                import { StockCardComponent } from './stock/stock-card/stock-card.component';
                import { CreateStockItemComponent } from './stock/create-stock-item/create-stock-item.component';

                // Insira a linha abaixo
                import { ReactiveFormsModule } from '@angular/forms';   

                @NgModule({
                    declarations: [
                        AppComponent,
                        StockItemComponent,
                        CreateStockComponent,
                        StockCardComponent,
                        CreateStockItemComponent
                    ],
                    imports: [
                        BrowserModule,
                        AppRoutingModule,
                        FormsModule,
                        ReactiveFormsModule                 // Linha Inserida
                    ],
                    providers: [],
                    bootstrap: [AppComponent]
                })
                export class AppModule { }

            . Atualize todo o código do componente "create-product-item.component.html" pelo conteúdo abaixo:

                <div class="container">
                    <form>
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockCode"
                                    name="stockCode"
                                    autocomplete="off"
                                    [formControl]="formProductItemStockCode">        <!-- Uso do [formControl] no lugar do [ngModel] -->
                            </div>
                            </div>

                            <div class="col-6">
                            <div class="form-group">
                                <label for="stockName">Stock Name</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockName"
                                    name="stockName"
                                    autocomplete="off"
                                    [formControl]="formProductItemStockName">            <!-- Uso do [formControl] no lugar do [ngModel] -->
                            </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPrice"
                                    name="stockPrice"
                                    autocomplete="off"
                                    [formControl]="formProductItemStockPrice">               <!-- Uso do [formControl] no lugar do [ngModel] -->

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPreviousPrice"
                                    name="stockPreviousPrice"
                                    autocomplete="off"
                                    [formControl]="formProductItemStockPreviousPrice">             <!-- Uso do [formControl] no lugar do [ngModel] -->

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice"></label>
                                <select name="stockExchange"
                                        id="stockExchange"
                                        class="form-select form-select-sm"
                                        autocomplete="off"
                                        [formControl]="formProductItemStockExchange">                       <!-- Uso do [formControl] no lugar do [ngModel] -->

                                <option value="NYSE" selected>NYSE</option>
                                <option value="NASDAQ">NASDAQ</option>
                                <option value="OTHER">OTHER</option>
                                </select>
                            </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2 mt-3">
                            <button class="btn btn-primary"
                                    type="submit"
                                    (click)="onSubmit()">Save</button>
                            </div>
                        </div>
                    </form>

                    <p>Form Control value: {{ formProductItemStockCode.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control valid: {{ formProductItemStockCode.valid | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockName.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockPrice.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockPreviousPrice.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockExchange.value | json }}</p>           <!-- Acessando o valor atual da formulário -->

                </div>

            . Atualize todo o código do componente "create-product-item.component.ts" com o conteúdo abaixo:

                import { Component } from '@angular/core';
                import {FormControl} from "@angular/forms";                     // Linha inserida

                @Component({
                    selector: 'app-create-product-item',
                    templateUrl: './create-product-item.component.html',
                    styleUrls: ['./create-product-item.component.css']
                })

                export class CreateProductItemComponent {
                    public formProductItemStockCode = new FormControl();                                    // Linha inserida
                    public formProductItemStockName = new FormControl();                                    // Linha inserida
                    public formProductItemStockPrice = new FormControl();                                   // Linha inserida
                    public formProductItemStockPreviousPrice = new FormControl();                           // Linha inserida
                    public formProductItemStockExchange = new FormControl();                                // Linha inserida

                    constructor() {}

                    onSubmit(){
                        console.log('Name Control Value', this.formProductItemStockCode.value );            // Linha inserida
                        console.log('Name Control Value', this.formProductItemStockName.value );            // Linha inserida
                        console.log('Name Control Value', this.formProductItemStockPrice.value );           // Linha inserida
                        console.log('Name Control Value', this.formProductItemStockPreviousPrice.value );   // Linha inserida
                        console.log('Name Control Value', this.formProductItemStockExchange.value );        // Linha inserida
                    }
                }

            . Altere o conteúdo do componente "app.component.html" pelo abaixo:

                <app-create-product-item></app-create-product-item>

            . Execute o projeto e verifique se o resultado de cada campo está sendo apresentado, tanto no formulário, quanto na console do navegador:

                ng serve --open

            . Altere o arquivo "create-product-item.component.ts" conforme abaixo:

                ...
                export class CreateProductItemComponent {
                    public formProductItemStockCode = new FormControl('10', Validators.required);       // Linha alterada
                    ...
                }
                ...

            . Execute o projeto e verifique se o comportamento do campo "formProductItemStockCode"

                ng serve --open

        . formGroup
            
            . É usado para criar um grupo de formulários. Ela permite que o Angular crie um objeto FormGroup que 
                contém todos os controles do formulário.

            . É usado em conjunto com a classe FormGroup para criar um grupo de formulários. O objeto FormGroup é um 
                objeto que contém todos os controles do formulário, bem como suas validações.

            . formControlName é usada para vincular um controle individual a um elemento HTML. Ela permite que o Angular crie 
                um objeto FormControl e o vincule a um elemento HTML.

            . formGroupName é usada para vincular um grupo de formulários a um elemento HTML. Ela permite que o Angular 
                crie um objeto FormGroup e o vincule a um elemento HTML.




            . Exemplo

                import { Component } from '@angular/core';
                import { FormGroup, FormControl } from '@angular/forms';
                
                @Component({
                  selector: 'app-exemplo',
                  template: `
                    <form [formGroup]="produtoForm" (ngSubmit)="onSubmit()">
                      <div formGroupName="produto">
                        <label>Nome do Produto:</label>
                        <input formControlName="nome" type="text">
                      </div>
                      <div formGroupName="produto">
                        <label>Descrição do Produto:</label>
                        <textarea formControlName="descricao" type="text"></textarea>
                      </div>
                      <div formGroupName="produto">
                        <label>Preço do Produto:</label>
                        <input formControlName="preco" type="number">
                      </div>
                      <button type="submit" [disabled]="!produtoForm.valid">Salvar</button>
                    </form>
                  `
                })
                export class ExemploComponent {
                  produtoForm: FormGroup;
                
                  constructor() {
                    this.produtoForm = new FormGroup({
                      produto: new FormGroup({
                        nome: new FormControl(''),
                        descricao: new FormControl(''),
                        preco: new FormControl('')
                      })
                    });
                  }
                
                  onSubmit() {
                    if (this.produtoForm.valid) {
                        console.log(this.produtoForm.value);
                        
                        // código para salvar o produto

                        this.productForm.reset();
                    }
                  }
                }

            . A diretiva formGroup permite que o Angular crie um objeto FormGroup que contém todos os controles do 
                formulário. Isso permite que o Angular faça a validação dos campos e permite que o Angular acesse os 
                valores dos campos.

            . O método "reset" de um objeto FormGroup no Angular é utilizado para resetar o formulário para o seu estado 
                inicial.

                . Quando você chama o método reset em um objeto FormGroup, o seguinte ocorre:

                    . Todos os controles de formulário são resetados: Os valores dos controles de formulário são resetados 
                        para o seu valor inicial.

                    . As validações são redefinidas: As validações dos controles de formulário são redefinidas para o seu 
                        estado inicial.

                    . O estado do formulário é resetado: O estado do formulário é resetado para o seu estado inicial, 
                        incluindo a propriedade dirty e touched.

                    . O método reset é útil quando você deseja limpar o formulário e reiniciar o processo de edição ou 
                        quando você deseja cancelar as alterações feitas no formulário

        . Demo

            . Altere o conteúdo do arquivo "create-product-item.component.html" para retorno a posição inicial conforme abaixo:

                <div class="container">
                    <form>
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockCode"
                                    name="stockCode"
                                    autocomplete="off">
                                    <!-- [formControl]="formProductItemStockCode">        Linha apagada -->
                            </div>
                            </div>

                            <div class="col-6">
                            <div class="form-group">
                                <label for="stockName">Stock Name</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockName"
                                    name="stockName">
                                    <!-- [formControl]="formProductItemStockName">        Linha apagada -->
                            </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPrice"
                                    name="stockPrice"
                                    autocomplete="off">
                                    <!-- [formControl]="formProductItemStockPrice">        Linha apagada -->

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPreviousPrice"
                                    name="stockPreviousPrice"
                                    autocomplete="off">
                                    <!-- [formControl]="formProductItemStockPreviousPrice">        Linha apagada -->

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice"></label>
                                <select name="stockExchange"
                                        id="stockExchange"
                                        class="form-select form-select-sm"
                                        autocomplete="off">
                                        <!-- [formControl]="formProductItemStockExchange">        Linha apagada -->

                                <option value="NYSE" selected>NYSE</option>
                                <option value="NASDAQ">NASDAQ</option>
                                <option value="OTHER">OTHER</option>
                                </select>
                            </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2 mt-3">
                            <button class="btn btn-primary"
                                    type="submit"
                                    (click)="onSubmit()">Save</button>
                            </div>
                        </div>
                    </form>

                    <!-- Trecho abaixo apagado -->

                    <p>Form Control value: {{ formProductItemStockCode.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control valid: {{ formProductItemStockCode.valid | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockName.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockPrice.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockPreviousPrice.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    <p>Form Control value: {{ formProductItemStockExchange.value | json }}</p>           <!-- Acessando o valor atual da formulário -->
                    
                    <!-- Fim da Eliminação -->

                </div>

            . Altere o conteúdo do arquivo "create-product-item.component.ts" conforme abaixo:

                import { Component } from '@angular/core';
                import {FormControl, FormGroup, Validators} from "@angular/forms";      // Import acrescentado com "FormGroup"

                @Component({
                    selector: 'app-create-product-item',
                    templateUrl: './create-product-item.component.html',
                    styleUrls: ['./create-product-item.component.css']
                })

                export class CreateProductItemComponent {
                    
                    /*      Trecho apagado
                        public formProductItemStockCode = new FormControl('10', Validators.required);
                        public formProductItemStockName = new FormControl();
                        public formProductItemStockPrice = new FormControl();
                        public formProductItemStockPreviousPrice = new FormControl();
                        public formProductItemStockExchange = new FormControl();
                    */


                    // Propriedade inserida
                    public stockForm: FormGroup = new FormGroup( {
                        stockCode: new FormControl('', [Validators.required]),
                        stockName: new FormControl('', [ Validators.required, Validators.minLength(3) ] ),
                        stockPrice: new FormControl('', [Validators.required]),
                        stockPreviousPrice: new FormControl('', [Validators.required]),
                        stockExchange: new FormControl('', [Validators.required])
                    });


                    constructor() {}

                    onSubmit(){
                        /*          Trecho apagado
                            console.log('Name Control Value', this.formProductItemStockCode.value );
                            console.log('Name Control Valid', this.formProductItemStockCode.valid );
                            console.log('Name Control Value', this.formProductItemStockName.value );
                            console.log('Name Control Value', this.formProductItemStockPrice.value );
                            console.log('Name Control Value', this.formProductItemStockPreviousPrice.value );
                            console.log('Name Control Value', this.formProductItemStockExchange.value );
                        */

                        console.log(this.stockForm.value);        // Linha inserida
                        console.log(this.stockForm.valid);        // Linha inserida

                    }
                }

            . Altere o conteúdo do arquivo "create-product-item.component.html" conform abaixo:

                <div class="container">

                    <!-- Diretiva [formGroup] inserida e event binding (ngSubmit) inserido -->
                    <form [formGroup]="stockForm"
                            (ngSubmit)="onSubmit()">
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>

                                <!-- Atributo "formControlName" inserido -->
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockCode"
                                    name="stockCode"
                                    formControlName="stockCode"
                                    autocomplete="off">
                            </div>
                            </div>

                            <div class="col-6">
                            <div class="form-group">
                                <label for="stockName">Stock Name</label>

                                <!-- Atributo "formControlName" inserido -->
                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockName"
                                    formControlName="stockName"
                                    autocomplete="off"
                                    name="stockName">
                                    <!-- [formControl]="formProductItemStockName">        Linha apagada -->
                            </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>

                                <!-- Atributo "formControlName" inserido -->
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPrice"
                                    name="stockPrice"
                                    formControlName="stockPrice"
                                    autocomplete="off">

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>

                                <!-- Atributo "formControlName" inserido -->
                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPreviousPrice"
                                    name="stockPreviousPrice"
                                    formControlName="stockPreviousPrice"
                                    autocomplete="off">
                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice"></label>

                                <!-- Atributo "formControlName" inserido -->
                                <select name="stockExchange"
                                        id="stockExchange"
                                        class="form-select form-select-sm"
                                        formControlName="stockExchange"
                                        autocomplete="off">

                                <option value="NYSE" selected>NYSE</option>
                                <option value="NASDAQ">NASDAQ</option>
                                <option value="OTHER">OTHER</option>
                                </select>
                            </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2 mt-3">

                            <!-- Atribute Binding [disabled] inserido -->
                            <button class="btn btn-primary"
                                    [disabled]="!stockForm.valid"
                                    type="submit">
                                    <!-- (click)="onSubmit()"   Event Binding eliminado -->
                                Save
                            </button>
                            </div>
                        </div>
                    </form>

                    <!-- Trecho HTML inserido -->
                    <p>Form Control value: {{ stockForm.value | json }}</p>
                    <p>Form Control status: {{ stockForm.status | json }}</p>
                    <!-- fim da inserção -->

                </div>

            . Execute o projeto e verifique se o botão está sendo habilitado somente quando a formulário estiver validado:

                ng s -o

            . Insira a linha abaixo no componente "create-product-item.component.ts"

                ...
                export class CreateProductItemComponent {

                    ...
                    public submitedForm: Boolean = false;                   // Linha inserida
                    ...

                    onSubmit(){

                        // if alterado
                        if (this.stockForm.valid) {
                            console.log(this.stockForm.value);        
                            console.log(this.stockForm.valid);        

                            this.stockForm.reset();     // Para limpar o formulário


                            this.submitedForm = false;
                        } 
                        else
                        {
                            this.submitedForm = true;
                        }
                    }

                }


            . Implemente as linhas das mensagens de validação abaixo no componente "create-product-item.component.html":

                <div class="container">
                    <form [formGroup]="stockForm"
                            (ngSubmit)="onSubmit()">
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>

                                <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockCode"
                                    name="stockCode"
                                    formControlName="stockCode"
                                    autocomplete="off">
                            </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <label for="stockName">Stock Name</label>

                                    <input type="text"
                                        class="form-control form-control-sm"
                                        id="stockName"
                                        formControlName="stockName"
                                        autocomplete="off"
                                        name="stockName">

                                    <!-- Div inserida -->
                                    <div *ngIf="stockForm.get('stockName')?.invalid &&
                                                ( stockForm.get('stockName')?.dirty ||
                                                    stockForm.get('stockName')?.touched ||
                                                    submitedForm)"
                                        [ngClass]="{'error-message': stockForm.get('stockName')?.invalid &&
                                                        ( stockForm.get('stockName')?.dirty ||
                                                        stockForm.get('stockName')?.touched ||
                                                        submitedForm)}">
                                        <div *ngIf="stockForm.get('stockName')?.errors?.required">
                                            * Stock Name is Mandatory
                                        </div>

                                        <div *ngIf="stockForm.get('stockName')?.errors?.minlength">
                                            * Minimum length Stock Name will be 3 characteres
                                        </div>
                                    </div>
                                    <!-- Fim da Inserção -->

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>

                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPrice"
                                    name="stockPrice"
                                    formControlName="stockPrice"
                                    autocomplete="off">

                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>

                                <input type="number"
                                    class="form-control form-control-sm"
                                    id="stockPreviousPrice"
                                    name="stockPreviousPrice"
                                    formControlName="stockPreviousPrice"
                                    autocomplete="off">
                            </div>
                            </div>
                            <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice"></label>

                                <select name="stockExchange"
                                        id="stockExchange"
                                        class="form-select form-select-sm"
                                        formControlName="stockExchange"
                                        autocomplete="off">

                                <option value="NYSE" selected>NYSE</option>
                                <option value="NASDAQ">NASDAQ</option>
                                <option value="OTHER">OTHER</option>
                                </select>
                            </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2 mt-3">

                            <button class="btn btn-primary"
                                    type="submit">
                                Save
                            </button>

                            </div>


                        </div>
                    </form>

                    <!-- Trecho INserido -->
                    <p>Form Control value: {{ stockForm.get('stockName')?.value | json }}</p>
                    <p>Form Control invalid {{ stockForm.get('stockName')?.invalid | json }}</p>
                    <p>Form Control dirty {{ stockForm.get('stockName')?.dirty | json }}</p>
                    <p>Form Control touched {{ stockForm.get('stockName')?.touched | json }}</p>
                    <!-- Fim da inserção -->

                    <p>Form Control value: {{ stockForm.value | json }}</p>
                    <p>Form Control status: {{ stockForm.status | json }}</p>
                </div>

            . Execute o projeto e verifique se as mensagens de validação estão aparecendo

                ng s -o

        . formBuilder

            . O FormBuilder é uma classe do Angular que ajuda a criar formulários de forma mais fácil e eficiente. Ele fornece 
                métodos para criar formulários, grupos de formulários e controles de formulário de forma mais simples e legível.

            . Com o FormBuilder, você pode criar formulários de forma mais declarativa, sem precisar criar manualmente os objetos 
                FormGroup, FormControl e FormArray.

            . Aqui estão alguns dos principais benefícios do uso do FormBuilder:

                . Criação de formulários de forma mais simples: O FormBuilder fornece métodos para criar formulários de 
                    forma mais simples e legível, sem precisar criar manualmente os objetos FormGroup, FormControl e FormArray.

                . Definição de validações de forma mais fácil: O FormBuilder permite que você defina validações de forma mais 
                    fácil e legível, utilizando métodos como required, minLength, maxLength, etc.

            . Exemplo

                import { Component } from '@angular/core';
                import { FormBuilder, FormGroup, Validators } from '@angular/forms';    // 1. Faça o import da biblioteca
                
                @Component({
                  selector: 'app-exemplo',
                  template: `
                    <form [formGroup]="produtoForm" (ngSubmit)="onSubmit()">
                      <div formGroupName="produto">
                        <label>Nome do Produto:</label>
                        <input formControlName="nome" type="text">                      <!-- 7. Utilizar o formulário no template -->
                      </div>
                      <div formGroupName="produto">
                        <label>Descrição do Produto:</label>
                        <textarea formControlName="descricao" type="text"></textarea>   <!-- 7. Utilizar o formulário no template -->
                      </div>
                      <button type="submit" [disabled]="!produtoForm.valid">Salvar</button>
                    </form>
                  `
                })
                export class ExemploComponent {
                  produtoForm: FormGroup;                                               // 4. Crie o objeto do FormBuilder
                
                  constructor(private formBuilder: FormBuilder) {                       // 3. Crie uma instância do FormBuilder no seu componente:
                    this.produtoForm = this.formBuilder.group({                         // 4. Criar um formulário com o FormBuilder
                        nome: ['', Validators.required],                                // 6. Definir validações
                        descricao: ['', Validators.required]
                    });

                    onSubmit() {                                                        // 8. Tratar o envio do formulário
                      if (this.produtoForm.valid) {
                        console.log(this.produtoForm.value);
                        // código para salvar o produto
                      }
                    }
                  }
                }

        . Demo
            
            . Retorne o conteúdo do componente "create-product-item.component.ts" para a versão da criação conforme abaixo:

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

                @Component({
                    selector: 'app-create-product-item',
                    templateUrl: './create-product-item.component.html',
                    styleUrls: ['./create-product-item.component.css']
                })

                export class CreateProductItemComponent {

                    constructor() {}

                }

            . Insira as linha abaixo no componente "create-product-item.component.ts"


                import { Component } from '@angular/core';
                import { FormBuilder, FormGroup, Validators } from '@angular/forms';    // Linha inserida

                @Component({
                    selector: 'app-create-product-item',
                    templateUrl: './create-product-item.component.html',
                    styleUrls: ['./create-product-item.component.css']
                })

                export class CreateProductItemComponent {
                    productForm: FormGroup;                                             // Linha inserida


                    constructor(private formBuilder: FormBuilder) {
                        onCreateForm();                                                 // Linha inserida
                    }

                    onCreateForm(){                                                     // Método inserida
                        this.productForm = this.formBuilder.group( {
                            stockCode: [null, Validators.required ],
                            stockName: [null, [ Validators.required, Validators.minlength(3) ] ],
                            stockPrice: [null, [ Validators.required, Validators.min(0)] ],
                            stockPreviousPrice: [null, [ Validators.required, Validators.min(0)] ],
                            stockExchange: ['NYSE', Validators.required]
                        });
                    }

                    onSubmit(){                                                         // Método inserido
                        if (this.productForm.valid) {
                        console.log(this.productForm.value);
                        this.submitedForm = false;
                    }
                    else
                    {
                        this.submitedForm = true;
                    }
                }

            . Retorne o conteúdo do componente "create-product-item.component.html" para a versão inicial conforma abaixo:

                <div class="container">
                    <form [formGroup]="productForm"
                            (ngSubmit)="onSubmit()">
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockCode">Stock Code</label>

                                    <!-- formControlName="stockCode" eliminado -->
                                    <input type="text"
                                        class="form-control form-control-sm"
                                        id="stockCode"
                                        name="stockCode"
                                        autocomplete="off"
                                        formControlName="stockCode">       
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <label for="stockName">Stock Name</label>
                                    <input type="text"
                                        class="form-control form-control-sm"
                                        id="stockName"
                                        name="stockName"
                                        autocomplete="off"
                                        formControlName="stockName"

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockPrice">Stock Price</label>
                                    <input type="number"
                                        class="form-control form-control-sm"
                                        id="stockPrice"
                                        name="stockPrice"
                                        autocomplete="off"
                                        formControlName="stockPrice">

                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockPreviousPrice">Stock Previous Price</label>
                                    <input type="number"
                                        class="form-control form-control-sm"
                                        id="stockPreviousPrice"
                                        name="stockPreviousPrice"
                                        autocomplete="off"
                                        formControlName="stockPreviousPrice">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="stockPreviousPrice"></label>
                                    <select name="stockExchange"
                                            id="stockExchange"
                                            class="form-select form-select-sm"
                                            autocomplete="off"
                                            formControlName="stockExchange">
                                    <option value="NYSE" selected>NYSE</option>
                                    <option value="NASDAQ">NASDAQ</option>
                                    <option value="OTHER">OTHER</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2 mt-3">
                            <button class="btn btn-primary"
                                    type="submit"
                                    (click)="onSubmit()">Save</button>
                            </div>
                        </div>
                    </form>

                    <!-- Trecho inserido -->
                    <p>Form Control value: {{ productForm.get('stockName')?.value | json }}</p>
                    <p>Form Control invalid {{ productForm.get('stockName')?.invalid | json }}</p>
                    <p>Form Control dirty {{ productForm.get('stockName')?.dirty | json }}</p>
                    <p>Form Control touched {{ productForm.get('stockName')?.touched | json }}</p>

                    <p>Form Control status: {{ productForm.status | json }}</p>
                    <!-- Fim da inserção -->

                </div>

            . Execute o projeto e verifique se a validação do campo "Stock Name" está sendo feito com sucesso:

                ng s -o

            . Não será necessário alterar o componente "create-product-item.component.html", porque o "formBuilder" trabalha com 
                o atributo "formControlName" e ele já está aderente com a versão anterior.

                <div class="container">
                    <form [formGroup]="stockForm" (ngSubmit)="onSubmit()">
                        <h2>Create Product Item Form</h2>
                        <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                            <label for="stockCode">Stock Code</label>

                            <input type="text"
                                    class="form-control form-control-sm"
                                    id="stockCode"
                                    name="stockCode"
                                    formControlName="stockCode"
                                    autocomplete="off">

                            <!-- Div inserida -->
                            <div *ngIf="productForm.get('stockCode')?.invalid &&
                                                                    ( productForm.get('stockCode')?.dirty ||
                                                                        productForm.get('stockCode')?.touched ||
                                                                        submitedForm)"
                                [ngClass]="{'error-message': productForm.get('stockName')?.invalid &&
                                                                ( productForm.get('stockCode')?.dirty ||
                                                                productForm.get('stockCode')?.touched ||
                                                                submitedForm)}">
                                <div *ngIf="productForm.get('stockCode')?.errors?.required">
                                * Stock Code is Mandatory
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="stockName">Stock Name</label>

                                <input type="text"
                                        class="form-control form-control-sm"
                                        id="stockName"
                                        formControlName="stockName"
                                        autocomplete="off"
                                        name="stockName">

                                <!-- Div inserida -->
                                <div *ngIf="productForm.get('stockName')?.invalid &&
                                                                        ( productForm.get('stockName')?.dirty ||
                                                                            productForm.get('stockName')?.touched ||
                                                                            submitedForm)"
                                    [ngClass]="{'error-message': productForm.get('stockName')?.invalid &&
                                                                ( productForm.get('stockName')?.dirty ||
                                                                    productForm.get('stockName')?.touched ||
                                                                    submitedForm)}">
                                    <div *ngIf="productForm.get('stockName')?.errors?.required">
                                    * Stock Name is Mandatory
                                    </div>

                                    <div *ngIf="productForm.get('stockName')?.errors?.minlength">
                                    * Minimum length Stock Name will be 3 characteres
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                                <label for="stockPrice">Stock Price</label>
                            
                                <input type="number"
                                                class="form-control form-control-sm"
                                                id="stockPrice"
                                                name="stockPrice"
                                                formControlName="stockPrice"
                                                autocomplete="off">
                            
                                <!-- Div inserida -->
                                <div *ngIf="productForm.get('stockPrice')?.invalid &&
                                                        ( productForm.get('stockPrice')?.dirty ||
                                                            productForm.get('stockPrice')?.touched ||
                                                            submitedForm)" [ngClass]="{'error-message': productForm.get('stockPrice')?.invalid &&
                                                        ( productForm.get('stockPrice')?.dirty ||
                                                        productForm.get('stockPrice')?.touched ||
                                                        submitedForm)}">
                                    <div *ngIf="productForm.get('stockPrice')?.errors?.required">
                                    * Stock Price is Mandatory
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="stockPreviousPrice">Stock Previous Price</label>
                            
                                <input type="number"
                                                class="form-control form-control-sm"
                                                id="stockPreviousPrice"
                                                name="stockPreviousPrice"
                                                formControlName="stockPreviousPrice"
                                                autocomplete="off">
                            
                                <!-- Div inserida -->
                                <div *ngIf="productForm.get('stockPreviousPrice')?.invalid &&
                                                        ( productForm.get('stockPreviousPrice')?.dirty ||
                                                            productForm.get('stockPreviousPrice')?.touched ||
                                                            submitedForm)" [ngClass]="{'error-message': productForm.get('stockPreviousPrice')?.invalid &&
                                            ( productForm.get('stockPreviousPrice')?.dirty ||
                                                productForm.get('stockPreviousPrice')?.touched ||
                                                submitedForm)}">
                                    <div *ngIf="productForm.get('stockPreviousPrice')?.errors?.required">
                                    * Stock Previous Price is Mandatory
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                            <label for="stockExchange">Exchange</label>
                        
                            <select name="stockExchange" id="stockExchange" class="form-select form-select-sm" formControlName="stockExchange"
                                autocomplete="off">
                        
                                <option value="NYSE" selected>NYSE</option>
                                <option value="NASDAQ">NASDAQ</option>
                                <option value="OTHER">OTHER</option>
                            </select>
                            </div>
                        </div>
                        </div>
                        
                        <div class="row">
                        <div class="col-2 mt-3">
                        
                            <!-- Event Binding eliminado -->
                            <button class="btn btn-primary" type="submit">
                            Save
                            </button>
                        
                        </div>
                        </div>
                    </form>

                    <!-- Trecho HTML inserido -->
                    <p>Form Control value: {{ productForm.get('stockName')?.value | json }}</p>
                    <p>Form Control invalid {{ productForm.get('stockName')?.invalid | json }}</p>
                    <p>Form Control dirty {{ productForm.get('stockName')?.dirty | json }}</p>
                    <p>Form Control touched {{ productForm.get('stockName')?.touched | json }}</p>

                    <p>Form Control status: {{ productForm.status | json }}</p>
                    <!-- fim da inserção -->
                </div>

            . Execute o projeto e verifique se as mensagens de validação estão aparecendo

                ng s -o

        . formArray

8. Componentes Service
----------------------

    . A finalidade dos componentes Service no Angular é:

        . Compartilhar dados:               Podem ser usados para compartilhar dados entre diferentes componentes da aplicação. 
                                            Isso é especialmente útil quando você precisa acessar dados em diferentes partes da 
                                            aplicação.

        . Fornecer funcionalidades:         Podem ser usados para fornecer funcionalidades que podem ser utilizadas por 
                                            diferentes componentes da aplicação. Especialmente útil quando precisamos realizar 
                                            operações complexas que envolvem múltiplos componentes.

        . Gerenciar estado:                 Podem ser usados para gerenciar o estado da aplicação. Isso é especialmente 
                                            útil quando precisamos manter um estado consistente em diferentes partes da aplicação.

        . Realizar operações assíncronas:   Podem ser usados para realizar operações assíncronas, como chamadas à API ou 
                                            leitura de dados de um banco de dados.

        . Fornecer uma camada de abstração: Podem ser usados para fornecer uma camada de abstração entre os componentes 
                                            da aplicação e as operações que eles realizam. Isso é especialmente útil quando você 
                                            precisa mudar a implementação de uma operação sem afetar os componentes que a utilizam.

    . Os "Services" no Angular são projetados para serem utilizados em conjunto com os componentes da aplicação. Eles são injetados 
        nos componentes que os necessitam e podem ser utilizados para fornecer dados e funcionalidades.

    . Como os serviços podem ser utilizados no Angular:

        . Serviço de autenticação: Um serviço de autenticação pode ser utilizado para gerenciar o processo de autenticação do usuário 
            e fornecer informações sobre o usuário autenticado.

        . Serviço de dados: Um serviço de dados pode ser utilizado para fornecer dados para os componentes da aplicação e gerenciar 
            a leitura e escrita de dados no banco de dados.

        . Serviço de notificação: Um serviço de notificação pode ser utilizado para fornecer notificações para os usuários e gerenciar 
            a exibição de notificações na aplicação.

    . Exemplo

        // Service
        import { Injectable } from '@angular/core';
        
        @Injectable({                                                   // 2. ProvidedIn
          providedIn: 'root'
        })
        export class MeuServicoService {
        
          constructor() { }
        
          obterDados(): string {
            return 'Dados do serviço';
          }
        
        }


        // Component              
        import { Component, OnInit } from '@angular/core';
        import { MeuServicoService } from './meu-servico.service';
        
        @Component({
          selector: 'app-meus-dados',
          template: '<p>Meus dados: {{ dados }}</p>'
        })
        export class MeusDadosComponent implements OnInit {
        
          dados: string;
        
            // O serviço MeuServicoService é injetado no componente 
            // MeusDadosComponent através do construtor  
          constructor(private meuServico: MeuServicoService) { }            // 1. Injeção de dependência
        
          ngOnInit(): void {
            this.dados = this.meuServico.obterDados();                      // 3. Uso do serviço
          }
        
        }

        1. Injeção de dependência

            . A injeção de dependência é feita através do construtor do componente, onde o 
                serviço é passado como um parâmetro. O Angular então se encarrega de criar 
                uma instância do serviço e a passar para o componente.

        2. ProvidedIn

            . O @Injectable decorator é utilizado para marcar o serviço como injetável. O providedIn é utilizado 
                para especificar onde o serviço deve ser criado. Nesse caso, o serviço é criado na raiz da 
                aplicação ('root').

        3. Uso do serviço

            . O serviço é então utilizado no componente para obter os dados que são exibidos no template. 
                O método obterDados() do serviço é chamado no ngOnInit do componente para obter os dados.


    . Demo

        . Execute o comando abaixo na pasta raiz do projeto:

            ng g s services/product-item --skip-tests
            ng g class model/product-item --skip-tests
        
        . Altere a classe "product-item.ts" com o conteúdo abaixo:

            export class ProductItem {

                // Construtor inserido
                constructor(public stockCode: string,
                    public stockName: string,
                    public stockPrice: number,
                    public stockPreviousPrice: number,
                    public stockExchange: string) {

                }

            }

        . Altere a clase "product-item.service.ts" com o conteúdo abaixo:

            import { Injectable } from '@angular/core';
            import {ProductItem} from "../model/product-item";

            @Injectable({
                providedIn: 'root'
            })
            export class ProductItemService {

            public products: ProductItem[];
                constructor() {
                    this.products = [];
                }

                public post( product: ProductItem ){
                    this.products.push(product);
                }

                public put( stockCode: string, product: ProductItem ){

                }

                public delete( stockCode: string ){

                }

                public getById( stockCode: string ){

                }

                public getAll(): ProductItem[] {
                    return this.products;
                }

                public update( product: ProductItem ){

                }


            }

        . Insira as linhas abaixo no arquivo "create-product-item.component.ts":

            import { Component } from '@angular/core';
            import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
            import {ProductItemService} from "../../services/product-item.service";
            import {ProductItem} from "../../model/product-item";    // Linha inserida

            @Component({
                selector: 'app-create-product-item',
                templateUrl: './create-product-item.component.html',
                styleUrls: ['./create-product-item.component.css']
            })

            export class CreateProductItemComponent {
                public submitedForm: Boolean = false;                   // Linha inserida
                public notablePeople: string;

                public productForm: FormGroup = new FormGroup( {
                    stockCode: new FormControl('', [Validators.required]),
                    stockName: new FormControl('', [ Validators.required, Validators.minLength(3) ] ),
                    stockPrice: new FormControl('', [Validators.required]),
                    stockPreviousPrice: new FormControl('', [Validators.required]),
                    stockExchange: new FormControl('NYSE', [Validators.required])
                });


                constructor( public productItemService: ProductItemService ) {
                    this.notablePeople = "Bill Gates";
                }

                onSubmit(){
                    if (this.productForm.valid) {
                        // console.log(this.stockForm.value);        // Linha Eliminada
                        // console.log(this.stockForm.valid);        // Linha Eliminada

                        // Insira a linha abaixo
                        this.productItemService.post( new ProductItem(
                            this.productForm.value.stockCode,
                            this.productForm.value.stockName,
                            this.productForm.value.stockPrice,
                            this.productForm.value.stockPreviousPrice,
                            this.productForm.value.stockExchange
                        ));

                        this.productForm.reset();

                        this.submitedForm = false;
                    }
                    else
                    {
                        this.submitedForm = true;
                    }

                }

            }

        . Faça as alterações abaixo no arquivo "create-product-item.component.html":

            <div class="container">
                <form [formGroup]="stockForm" (ngSubmit)="onSubmit()">
                    ...
                </form>

                <!-- Trecho HTML Eliminado -->
                <!--
                <p>Form Control value: {{ stockForm.get('stockName')?.value | json }}</p>
                <p>Form Control invalid {{ stockForm.get('stockName')?.invalid | json }}</p>
                <p>Form Control dirty {{ stockForm.get('stockName')?.dirty | json }}</p>
                <p>Form Control touched {{ stockForm.get('stockName')?.touched | json }}</p>

                <p>Form Control status: {{ stockForm.status | json }}</p>
                -->
                <!-- fim da Eliminação -->

                <!-- Trecho HTML Inserido -->
                <div class="mt-3" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid black;">
                    <div class="row" style="padding: 10px;">
                    <div class="col-2">
                        Stock Code
                    </div>
                    <div class="col-3">
                        Stock Name
                    </div>
                    <div class="col-2">
                        Stock Price
                    </div>
                    <div class="col-2">
                        Stock Previous Price
                    </div>
                    <div class="col-3">
                        Stock Exchange
                    </div>
                    </div>
                    <div *ngFor="let p of productItemService.products; index as i" style="padding: 10px;">
                    <div class="row">
                        <div class="col-2">
                        {{ p.stockCode }}
                        </div>
                        <div class="col-3">
                        {{ p.stockName }}
                        </div>
                        <div class="col-2">
                        {{ p.stockPrice }}
                        </div>
                        <div class="col-2">
                        {{ p.stockPreviousPrice }}
                        </div>
                        <div class="col-3">
                        {{ p.stockExchange }}
                        </div>
                    </div>
                    </div>
                    <!-- Fim da Inserção -->
                </div>
            </div>        

    https://www.tektutorialshub.com/angular/angular-services/
    https://www.tektutorialshub.com/angular/angular-dependency-injection/



09. HTTP
--------

    https://www.tutorialspoint.com/angular/angular-http-client.htm
    https://www.tektutorialshub.com/angular/angular-httpclient/
    https://www.tektutorialshub.com/angular/angular-http-get-example-using-httpclient/


    . Observables

        . Um Observable é um objeto que emite valores ao longo do tempo e pode ser observado por outros 
            objetos. Em Angular, os Observables são usados para lidar com dados assíncronos, 
            como requisições HTTP, eventos de usuário e atualizações de estado.

        . Um Observable é como um fluxo de dados que pode ser inscrito por outros objetos, chamados de 
            Observers. Quando um Observable emite um valor, todos os Observers inscritos recebem esse valor.

        . Os Observables são úteis em Angular porque permitem que você:

            . Lide com dados assíncronos de forma eficiente

            . Seja notificado quando os dados mudam

            . Faça requisições HTTP de forma assíncrona

            . Lide com eventos de usuário de forma assíncrona

        . Em Angular, os Observables são implementados usando a biblioteca RxJS (Reactive Extensions for JavaScript).

            . A biblioteca RxJS (Reactive Extensions for JavaScript) é uma biblioteca de programação reativa para 
                JavaScript que permite lidar com fluxos de dados assíncronos de forma eficiente.

            . Como a biblioteca "rxjs" funciona:

                . Observables

                    Um Observable é um objeto que emite valores ao longo do tempo e pode ser observado por outros objetos. 
                    No Angular, os Observables são usados para lidar com dados assíncronos.

                . Observers

                    Um Observer é um objeto que se inscreve em um Observable para receber os valores emitidos por ele. 
                    No Angular, os Observers são usados para lidar com os dados recebidos de um Observable.

                . Subscription

                    Um Subscription é um objeto que representa a inscrição de um Observer em um Observable. 
                    No Angular, os Subscriptions são usados para gerenciar as inscrições dos Observers nos Observables.

                . Operadores

                    Os operadores são funções que podem ser usadas para transformar, filtrar e combinar Observables. 
                    No Angular, os operadores são usados para manipular os dados recebidos de um Observable.

                . Exemplo

                    import { Observable } from 'rxjs';

                    const meuObservable = new Observable(observer => {
                        // Faz algo assíncrono aqui, como uma requisição HTTP
                        setTimeout(() => {
                            observer.next('Dados carregados!');
                            observer.complete();
                        }, 2000);
                    });

                    meuObservable.subscribe(dados => {
                        console.log(dados); // Imprime "Dados carregados!"
                    });

            . Exemplos

                . Lidar com requisições HTTP assíncronas:

                    import { HttpClient } from '@angular/common/http';
                    import { Observable } from 'rxjs';

                    const httpClient = new HttpClient();
                    const observable = httpClient.get('https://api.example.com/data');

                    observable.subscribe(data => {
                        console.log(data);
                    });

                . Lidar com eventos de usuário:

                    import { fromEvent } from 'rxjs';

                    const button = document.getElementById('myButton');
                    const observable = fromEvent(button, 'click');

                    observable.subscribe(event => {
                        console.log('Botão clicado!');
                    });

                . Lidar com atualizações de estado:

                    import { BehaviorSubject } from 'rxjs';

                    const estado = new BehaviorSubject('inicial');

                    estado.subscribe(estadoAtual => {
                        console.log(estadoAtual);
                    });

                    estado.next('novo estado');

    . HttpClient

        . Chamadas HTTP no Angular são feitas utilizando o módulo HttpClient que é parte do Angular, localizado no pacote
            "@angular/common/http".

            . Para fazer uso desta biblioteca é necessário realizar o import do "HttpModule" dentro do "AppComponent":

                import { HttpClientModule } from '@angular/common/http';        // Import
                ...

                @NgModule({ 
                imports: [ 
                    BrowserModule, 
                    ...
                    HttpClientModule,                                           // import HttpClientModule depois do  BrowserModule. 
                ] 
                }) 
                export class AppModule {}

        . Para usarmos a classe HttpClient precisar fazer a injeção do objeto "http" dela no método "constructor" do componente:

            import { Component, OnInit } from '@angular/core';
            import { HttpClient } from '@angular/common/http';          // Import da biblioteca no componente
            
            @Component({
              selector: 'app-exemplo',
              template: '<p>Resposta: {{ resposta }}</p>'
            })
            export class ExemploComponent implements OnInit {
              resposta: string;
                                      +---------------> Injeção do objeto http 
                                      |
                          |----------------------|              
              constructor(private http: HttpClient) { }
            
              ngOnInit(): void {
                this.http.get('https://api.exemplo.com/dados')
                  .subscribe(resposta => {
                    this.resposta = resposta;
                  });
              }
            }

        . O HttpClient é uma classe que fornece métodos para fazer requisições HTTP, como: get, post, put, delete, 
            entre outros.

        . Quando fazemos uma chamada HTTP no Angular, o seguinte fluxo ocorre:

            . Você cria uma instância do HttpClient e chama o método correspondente à requisição que você deseja fazer 
                (por exemplo, get, post, etc.).

            . O HttpClient cria uma requisição HTTP e a envia para o servidor.

            . O servidor processa a requisição e retorna uma resposta.

            . A resposta é recebida pelo HttpClient e é convertida em um objeto JavaScript.

            . O objeto JavaScript é retornado para o componente que fez a chamada.

        . Observables

            . São utilizados para lidar com as respostas das chamadas HTTP. Um Observable é um objeto que emite 
                valores ao longo do tempo. No caso das chamadas HTTP, o Observable emite a resposta do servidor.

        . Quando uma chamada HTTP é feita no Angular, o HttpClient retorna um Observable que emite a resposta do 
            servidor. Você pode então subscrever esse Observable para receber a resposta e processá-la.

            import { Component, OnInit } from '@angular/core';
            import { HttpClient } from '@angular/common/http';
            
            @Component({
              selector: 'app-exemplo',
              template: '<p>Resposta: {{ resposta }}</p>'
            })
            export class ExemploComponent implements OnInit {
              resposta: string;
            
              constructor(private http: HttpClient) { }
            
              ngOnInit(): void {
                this.http.get('https://api.exemplo.com/dados')
                  .subscribe(resposta => {                          // Subscrição ao observable retornado pela objeto http
                    this.resposta = resposta;
                  });
              }
            }

        . O HttpClient fornece vários métodos para fazer requisições HTTP, cada um desses métodos retorna um Observable, 
            que emite a resposta do servido:

            . get: faz uma requisição HTTP GET

            . post: faz uma requisição HTTP POST

            . put: faz uma requisição HTTP PUT

            . delete: faz uma requisição HTTP DELETE

            . patch: faz uma requisição HTTP PATCH

            . head: faz uma requisição HTTP HEAD

            . options: faz uma requisição HTTP OPTIONS

        . HttpClient utiliza diversos argumetos/parâmetros para fazer a requisão: 

            . URL solicitada

                https://api.exemplo.com/dados

            . Objeto json com argumentos opcionais :

                {
                    headers?: HttpHeaders | {[header: string]: string | string[]},
                    observe?: 'body' | 'events' | 'response',

                    params?: HttpParams|{[param: string]: string | string[]},
                    reportProgress?: boolean,
                    responseType?: 'arraybuffer'|'blob'|'json'|'text',
                    withCredentials?: boolean,
                }

                . headers: HTTP Headers of the request, either as string, array of string or array of HttpHeaders.

                . observe: Process the response and return the specific content of the response. Possible values are body, response and events. The default option of observer is body.

                . params: HTTP parameters of the request, either as string, array of string or array of HttpParams.

                . reportProgress: Whether to report the progress of the process or not (true or false).

                . responseType: Refers the format of the response. Possible values are arraybuffer, blob, json and text.

                . withCredentials: Whether the request has credentials or not (true or false).            

            . Exemplo:

                httpClient.get(url, options) 
                    .subscribe( (data) => console.log(data) );

    . Demo

        . Insira as linhas abaixo no arquivo "app.module.ts"

            import { HttpClientModule } from '@angular/common/http';        // Import
            ...

            @NgModule({ 
            imports: [ 
                BrowserModule, 
                ...
                HttpClientModule,                                           // import HttpClientModule depois do  BrowserModule. 
            ] 
            }) 
            export class AppModule {}

        . Faça as alterações abaixo no arquivo "stock-item.component.ts":

            import { HttpClient } from '@angular/common/http';              // Linha inserida

            import { Component, OnInit } from '@angular/core';
            import { Stock } from 'src/app/model/stock';

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

                public stock!: Stock;
                public stockClasses!: any;
                public stockStyles!: any;                                   // Linha inserida
                public saved: boolean = false;
                public productsStock: Array<Stock> = [];
                
                constructor( private http: HttpClient ) { }                 // Construtor alterado

                ngOnInit(): void {

                    this.onInitStock();

                    let diff = (this.stock.price / this.stock.previousPrice) - 1;
                    let largeChange = Math.abs(diff) > 0.01;
                    this.stockClasses = {
                        'positive': this.stock.isPositiveChange(),
                        'negative': !this.stock.isPositiveChange(),
                        'large-change': largeChange,
                        'small-change': !largeChange
                    };

                    this.stockStyles = {                                    // Objeto inserido
                        'color': this.stock.isPositiveChange() ? 'green' : 'red',
                        'font-size': largeChange ? '1.2em' : '0.8em'
                    };
                }

                toggleFavorite( event: any, index: number ) {
                    console.log('We are toggling the favorite state for this stock event.target ', event.target);
                    console.log('We are toggling the favorite state for this stock event.target.value ', event.target.value);
                    console.log('We are toggling the favorite state for this stock index ', index);                             // Linha inserida
                    console.log('We are toggling the favorite state for this stock ', this.productsStock[index]);               // Linha inserida
                }

                onInitStock() {
                    this.stock = new Stock('', '', 0, 0, '');
                }

                onSave(){
                    console.log('We are saving the stock', this.stock);
                    // this.stock = new Stock('', '', 0, 0, '');
                    this.productsStock.push(this.stock);
                    this.onInitStock();
                    this.saved=true;
                }

            }

        . Substitua o conteúdo do arquivo "app.component.html" com o conteúdo abaixo:

            <app-stock-item></app-stock-item>

        . Levante a aplicação e verifique se deu tudo certo

            ng s -o

        . Crie o arquivo "db.json" na pasta raiz do projeto com o conteúdo abaixo:

            {
                "stocks": [ 
                    {
                        "id": "10",
                        "code": "10",
                        "name": "Apple Inc.",
                        "price": 150,
                        "previousPrice": 140,
                        "exchange": "NYSE"
                    },
                    {
                        "id": "20",
                        "code": "20",
                        "name": "Microsoft Corp.",
                        "price": 100,
                        "previousPrice": 90,
                        "exchange": "NASDAQ"
                    },
                    {
                        "id": "30",
                        "code": "30",
                        "name": "Google Inc.",
                        "price": 400,
                        "previousPrice": 390,
                        "exchange": "NYSE"
                    },
                    {
                        "id": "40",
                        "code": "40",
                        "name": "Oracle Corp.",
                        "price": 200,
                        "previousPrice": 190,
                        "exchange": "NASDAQ"
                    },
                    {
                        "id": "50",
                        "code": "50",
                        "name": "IBM Corp.",
                        "price": 300,
                        "previousPrice": 290,
                        "exchange": "NYSE"
                    }
                ]
            }

        . Abra outro terminal e execute o comando abaixo na raiz do projeto:

            npx json-server db.json

        . Faça as alterações abaixo no arquivo "stock-item.component.ts":

            import { HttpClient } from '@angular/common/http';              

            import { Component, OnInit } from '@angular/core';
            import { Stock } from 'src/app/model/stock';

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

                public stock!: Stock;
                public stockClasses!: any;
                public stockStyles!: any;
                public saved: boolean = false;
                public productsStock: Array<Stock> = [];
                public response: any;                                            // Linha inserida
                
                constructor( private http: HttpClient ) { }                 

                ...

                onQueryProduct(){                                                  // Método inserido
                    this.http.get('http://localhost:3000/stocks/' + this.stock.code)
                    .subscribe(resposta => {
                        console.log(resposta);
                        this.response = resposta;
                        this.stock.code = this.response.code;
                        this.stock.name = this.response.name;
                        this.stock.price = this.response.price;
                        this.stock.previousPrice = this.response.previousPrice;
                        this.stock.exchange = this.response.exchange;
                    });
                }
            }

        . Faça as alterações abaixo no arquivo "stock-item.component.html":

            <h1>Welcome to stock-item</h1>

            <div class="container">
                <div class="alert alert-success" role="alert" *ngIf="!saved">
                    Product Name : <strong> {{stock.name}} </strong>
                </div>

                <form #stockForm="ngForm" 
                        (ngSubmit)="onSave()">
                    <div class="row">
                        <div class="col-2">
                            <div class="form-group">
                                <label for="stockCode">Stock Code</label>

                                <input type="text"
                                        class="form-control form-control-sm"
                                        id="stockCode" name="stockCode"
                                        [required]="true"
                                        [(ngModel)]="stock.code"
                                        (focus)="saved=false"
                                        (blur)="onQueryProduct()">                  <!-- Linha inserida -->
                            </div>
                        </div>

                        ...
                    </div>

                    ...
                </form>
            </div>

        . Levante a aplicação, digite código válidos de produtos e verifique se deu tudo certo

            ng s -o


    . Configuração e redirecionamento das chamadas "http":

        . Quando você executa o comando ng serve, o Angular cria um servidor de desenvolvimento que serve os arquivos 
            do seu aplicativo. No entanto, se o seu aplicativo precisa fazer requisições para um servidor de back-end, 
            você pode configurar o servidor de desenvolvimento para encaminhar essas requisições, ao invés de fazer as 
            chamadas diretamente ao servidor, por exemplo:

            . Ao executar o comando, no prompt na pasta raiz:

                npx json-server db.json

            . A saida será:

                JSON Server started on PORT :3000
                Press CTRL-C to stop
                Watching db.json...

                (˶ᵔ ᵕ ᵔ˶)

                Index:
                http://localhost:3000/

                Static files:
                Serving ./public directory if it exists

                Endpoints:
                http://localhost:3000/stocks

        . A rota principal para realizar nossas chamadas da API será "http://localhost:3000". Podemos abreviar essa rota 
            fazendo configurações num arquivo proxy separadamente:

            . Basta ter um arquivo com o nome "proxy.conf.json" na pasta raiz do projeto com o conteúdo abaixo:

                       +---> path 
                {      |
                    "/api": {
                        "target": "http://localhost:8080",  // todas as requisições para /api serão encaminhadas para http://localhost:8080
                        "secure": false,
                        "changeOrigin": true,
                        "pathRewrite": {
                            "^/api": ""
                        }
                    }
                }

            .  Esse arquivo de configuração é um arquivo JSON que contém as seguintes propriedades:

                . path: o caminho da requisição que deve ser encaminhada
                
                . target: o URL do servidor de back-end que deve receber a requisição
                
                . secure: um booleano que indica se a conexão com o servidor de back-end deve ser segura (HTTPS)
                
                . changeOrigin: um booleano que indica se o servidor de desenvolvimento deve alterar a origem da requisição

        . Tendo o arquivo "proxy.conf.json" configurado corretamente, basta levantar o projeto com o comando abaixo:

            ng serve --proxy-config  proxy.conf.json  

        . A partir do Angular 15 também introduziu um novo recurso chamado "proxy" no arquivo angular.json. Esse recurso permite que você 
            configure o proxy de forma mais fácil e flexível:

            {
                ...
                "projects": {
                    "my-app": {
                        ...
                        "architect": {
                            "serve": {
                                "options": {                            // Nó inserido
                                    "proxyConfig": "proxy.conf.json"
                                },
                                ...
                            }
                        }
                    }
                }
            }

        . Dessa forma podemos levantar o projeto da forma convencional, que as configurações serão utilizadas:

            ng s -o

    . Demo

        . Certifique-se que o servidor json está ativo e está rodando na URL "http://localhost:3000/"

            npx json-server db.json

        . Crie o arquivo "proxy.conf.json" na pasta raiz do projeto com o conteúdo abaixo:

            {
                "/api/stock": {
                    "target": "http://localhost:3000",
                    "secure": false,
                    "changeOrigin": true,
                    "pathRewrite": {
                        "^/api/stock": ""
                    }
                }
            }

        . Altere o arquivo "angular.json" conforme abaixo:

            {
                ...
                "projects": {
                    "my-app": {
                        ...
                        "architect": {
                            "serve": {
                                "options": {                            // Nó inserido
                                    "proxyConfig": "proxy.conf.json"
                                },
                                ...
                            }
                        }
                    }
                }
            }

        . Altere a chamada da URL no arquivo "stock-item.component.ts" como abaixo:

            ...
            onQueryProduct() {
//                this.http.get('/http://localhost:3000/stocks/' + this.stock.code)         // Linha eliminada
                this.http.get('/api/stock/stocks/' + this.stock.code)                           // Linha alterada
                .subscribe(resposta => {
                    console.log(resposta);
                    this.response = resposta;
                    this.stock.code = this.response.code;
                    this.stock.name = this.response.name;
                    this.stock.price = this.response.price;
                    this.stock.previousPrice = this.response.previousPrice;
                    this.stock.exchange = this.response.exchange;
                });
            }
            ...           

        . Levante o projeto e veja se a página "stock-item.component" está executando a chamada do item corretamente.

            ng s -o

Página 302

Utilize o link abaixo como exemplo para criar o CRUD

https://www.tektutorialshub.com/angular/angular-http-get-example-using-httpclient/






https://www.tektutorialshub.com/angular/angular-forms-fundamentals/
https://www.fabricadecodigo.com/criar-formulario-reactive-forms/
https://medium.com/@zeeshankhan8838/reactive-forms-in-angular-848d709cfba4
https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction
https://www.telerik.com/blogs/angular-basics-what-reactive-forms-when-use-them

Aula 16.2. Instalando e testando o json-server






        



PAREI AQUI, PÁGINA 149

https://consolelog.com.br/validacao-formulario-ngmodel-angular/
https://www.toptal.com/angular-js/angular-4-forms-validation



10. Routing
-----------

    . A tag "<router-outlet>" age como um marcador para onde a rota carregada deve ser exibida na interface. Basicamente, 
        é uma área reservada no DOM que indica ao Angular Router onde ele deve renderizar os componentes com base nas rotas 
        configuradas. 

        . Com base na URL e na configuração da URL vs componente associado, o angular irá renderizar o conteúdo no lugar 
            da tag <router-outlet>. Por exemplo:

                                            Apontar para                        Associado ao html
            http:///localhome:4200/about     ------------->  AboutComponent    ------------------>     about.component.html
                    |                                                                                               ^
                    V                                                                                               |
                Quando essa URL é chamada o <router-outlet> renderizará a página -----------------------------------+

        . A tag <router-outlet> deve ser inserida no componente "app.component.html" para executar a associação da URL com 
            o componente angular que será configurada num dos arquivos logo abaixo :

            // app.component.html
            <router-outlet></router-outlet>

    . No Angular, o roteamento é uma parte fundamental que permite a navegação entre diferentes componentes. As rotas 
        podem ser configuradas em três locais principais: no arquivo `app.module.ts`, no `app-routing.module.ts`, e em 
        um módulo específico. A seguir, apresento como realizar essas configurações.

        . Configuração no `app.module.ts`

            . No arquivo `app.module.ts`, você pode configurar as rotas diretamente, embora isso não seja a prática 
                recomendada para aplicações maiores. Aqui está um exemplo básico:

                import { NgModule } from '@angular/core';
                import { BrowserModule } from '@angular/platform-browser';
                import { RouterModule, Routes } from '@angular/router';
                import { AppComponent } from './app.component';
                import { HomeComponent } from './home/home.component';      // Importação dos componentes
                import { AboutComponent } from './about/about.component';   // Importação dos componentes

                // Configuração das rotas
                const appRoutes: Routes = [
                    { path: '', component: HomeComponent },
                    { path: 'about', component: AboutComponent }
                ];

                @NgModule({
                    declarations: [
                        AppComponent,
                        HomeComponent,
                        AboutComponent
                    ],
                    imports: [
                        BrowserModule,
                        RouterModule.forRoot(appRoutes) // Configurando as rotas aqui
                    ],
                    providers: [],
                    bootstrap: [AppComponent]
                })
                export class AppModule { }

        . Configuração no `app-routing.module.ts`

            . A maneira mais comum e organizada de configurar rotas é através do módulo de roteamento, geralmente chamado 
                de `app-routing.module.ts`. 

                import { NgModule } from '@angular/core';
                import { RouterModule, Routes } from '@angular/router';
                import { HomeComponent } from './home/home.component';
                import { AboutComponent } from './about/about.component';

                // Configuração das rotas
                const routes: Routes = [
                    { path: '', component: HomeComponent },
                    { path: 'about', component: AboutComponent }
                ];

                @NgModule({
                    imports: [RouterModule.forRoot(routes)],    // Utilização das rotas configuradas
                    exports: [RouterModule]
                })

                export class AppRoutingModule { }

        . Configuração em um Módulo Específico

            . O comando CLI para criar um arquivo de módulo das rotas são:

                ng generate module nome-do-modulo --routing
                
                ou

                ng g m nome-do-modulo --routing

            . Para módulos específicos (feature modules), você pode criar um arquivo de roteamento separado, pode ser no diretório raiz. 
                Por exemplo,  se você tiver um módulo chamado `AdminModule`, a configuração das rotas poderia ser feita assim:

                import { NgModule } from '@angular/core';
                import { RouterModule, Routes } from '@angular/router';
                import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
                import { AdminSettingsComponent } from './admin-settings/admin-settings.component';

                // Configuração das roas
                const adminRoutes: Routes = [
                    { path: 'dashboard', component: AdminDashboardComponent },
                    { path: 'settings', component: AdminSettingsComponent }
                ];

                @NgModule({
                    imports: [RouterModule.forChild(adminRoutes)],      // Utilização das rotas
                    exports: [RouterModule]
                })

                export class AdminRoutingModule { } ------------------------------------------------------------+
                                                                                                                |
            . Neste cenário precisamos adicionar o arquivo de módulo das rotas no componente "app.module.ts"    |
                                                                                                                |
                import { NgModule } from '@angular/core';                                                       |
                import { BrowserModule } from '@angular/platform-browser';                                      |
                import { AppComponent } from './app.component';                                                 |
                import { AppRoutingModule } from './app-routing.module';                                        |
                                                                                                                |
                @NgModule({                                                                                     |
                  declarations: [AppComponent],                                                                 |
                  imports: [BrowserModule, AdminRoutingModule], <-----------------------------------------------+
                  providers: [],
                  bootstrap: [AppComponent]
                })
                export class AppModule { }

    . Demo

        . Vamos utilizar a maneira mais padrão de configuração de rotas, que será no arquivo "app-routing.module.ts".

        . Faça as alterações no arquivo "app-routing.module.ts" conforme abaixo:

            import { NgModule } from '@angular/core';
            import { RouterModule, Routes } from '@angular/router';

            // Faça os imports abaixo
            import { StockItemComponent } from './stock/stock-item/stock-item.component';
            import { CreateStockComponent } from './stock/create-stock/create-stock.component';
            import { CreateStockItemComponent } from './stock/create-stock-item/create-stock-item.component';
            import { CreateProductItemComponent } from './stock/create-product-item/create-product-item.component';

            // Objeto inserido
            const routes: Routes = [
                { path: 'stock-item', component: StockItemComponent },
                { path: 'create-stock', component: CreateStockComponent },
                { path: 'create-stock-item', component: CreateStockItemComponent },
                { path: 'create-product-item', component: CreateProductItemComponent },
                { path: '', redirectTo: '/stock-item', pathMatch: 'full' },
                { path: '**', redirectTo: '/stock-item', pathMatch: 'full' }
            ];

            @NgModule({
                imports: [RouterModule.forRoot(routes)],
                exports: [RouterModule]
            })
            export class AppRoutingModule { }

        . Altere a linha do arquivo "app.component.html" conforme abaixo:

            <router-outlet></router-outlet>

        . Levante o projeto 

            ng s -o

        . Execute as URLs abaixo:

            http://localhost:4200/stock-item
            http://localhost:4200/create-stock
            http://localhost:4200/create-stock-item
            http://localhost:4200/create-product-item

        . Insira as linhas abaixo no arquivo "app.component.html"

            <!-- Div inserida -->
            <div>
                <span><a href="/stock-item">Stock Item</a></span>&nbsp;&nbsp;
                <span><a href="/create-stock">Create Stock</a></span>&nbsp;&nbsp;
                <span><a href="/create-product-item">Create Product Item</a></span>
            </div>

            <router-outlet></router-outlet>

        . Verifique o menu acima se está funcionando na página

    . Rotas Curingas e Padrões (Wildcards and Default)


        . Wildcards são usados em rotas do Angular para lidar com situações em que a rota não é exatamente igual à rota 
            definida no componente. Eles são representados por um asterisco (*) e podem ser usados para capturar 
            qualquer parte da URL que não seja igual à rota definida.

            const routes: Routes = [
              { path: 'usuario/:id', component: UsuarioComponent },
              { path: 'usuario/*', component: UsuarioComponent }
            ];

            .  A rota /usuario/* é uma rota wildcard que captura qualquer parte da URL que venha após /usuario/. Se
                o usuário acessar a URL /usuario/123/abc, a rota wildcard será ativada e o componente 
                UsuarioComponent será renderizado.

        . Defaults são usados em rotas do Angular para definir uma rota padrão que deve ser usada quando nenhuma outra rota 
            é encontrada. Eles são representados por um duplo asterisco (**) e podem ser usados para direcionar qualquer 
            URL que não seja igual à rota definida para um componente específico.

            const routes: Routes = [
              { path: '**', component: Erro404Component },
              { path: '', component: HomeComponent }
            ];

    . Demo

        . Insira as linhas abaixo no arquivo "app-routing.modules.ts":

            import { NgModule } from '@angular/core';
            import { RouterModule, Routes } from '@angular/router';
            import { StockItemComponent } from './stock/stock-item/stock-item.component';
            import { CreateStockComponent } from './stock/create-stock/create-stock.component';
            import { CreateStockItemComponent } from './stock/create-stock-item/create-stock-item.component';
            import { CreateProductItemComponent } from './stock/create-product-item/create-product-item.component';

            const routes: Routes = [
                { path: 'stock-item', component: StockItemComponent },
                { path: 'create-stock', component: CreateStockComponent },
                { path: 'create-stock-item', component: CreateStockItemComponent },
                { path: 'create-product-item', component: CreateProductItemComponent },
                { path: '', redirectTo: '/stock-item', pathMatch: 'full' },                 // Linha inserida
                { path: '**', redirectTo: '/create-product-item', pathMatch: 'full' }       // Linha inserida
            ];


            @NgModule({
                imports: [RouterModule.forRoot(routes)],
                exports: [RouterModule]
            })
            export class AppRoutingModule { }

        . Levante o projeto:

            ng s -o

        . Execute as rotas abaixo no navegador e veja o resultado:

            http://localhost:4200/
            http://localhost:4200/pagina




PAGINA 302







    . Bibliotecas utilizadas

        . Bibliotecas criadas automaticamente na criação do projeto:

            . NgModule

                . Um módulo é definido usando o decorator @NgModule, que recebe um objeto com várias propriedades:

                    . declarations: lista de componentes, diretivas e pipes que fazem parte do módulo
                    . imports: lista de módulos que são importados pelo módulo atual
                    . providers: lista de serviços que são fornecidos pelo módulo
                    . bootstrap: lista de componentes que são carregados inicialmente quando o módulo é iniciado

                . A biblioteca NgModule serve para:

                    . Organizar a aplicação em módulos independentes e reutilizáveis
                    . Fornecer uma forma de gerenciar as dependências entre os componentes e serviços
                    . Habilitar a funcionalidade de lazy loading, que permite carregar módulos apenas quando necessário

            . BrowserModule

                . Fornece o mecanismo de renderização para o navegador

                . Habilita a funcionalidade de roteamento

                . Fornece serviços para trabalhar com o DOM (Document Object Model)

                . Habilita a funcionalidade de eventos do navegador

            . AppRoutingModule

                . O AppRoutingModule é um módulo que contém as configurações de roteamento da aplicação. 
                    Ele é responsável por:

                    . Definir as rotas da aplicação

                    . Associar URLs a componentes específicos

                    . Configurar parâmetros de rota

                    . Habilitar a navegação entre as rotas

        . Bibliotecas adicionais

            . BrowserAnimationsModule

                . Fornece as funcionalidades de animação para os componentes da aplicação

                . Habilita as animações de transição entre as vistas da aplicação

                . Permiti que os desenvolvedores criem efeitos de transição personalizados

                . Com a BrowserAnimationsModule, os desenvolvedores podem criar animações de transição 
                    para os componentes da aplicação, como:

                    . Animações de entrada e saída de componentes

                    . Animações de transição entre as vistas da aplicação

                    . Animações de mudança de estado dos componentes

            . HttpClientModule -  serve para fazer requisições HTTP a partir da aplicação

                . Fornece uma API simples e fácil de usar para fazer requisições HTTP

                . Faz requisições HTTP para APIs externas ou para APIs dentro da própria aplicação

                . Manipula os dados recebidos das requisições HTTP

                . Trata erros e exceções relacionadas às requisições HTTP

            . FormsModule -  serve para fornecer funcionalidades de formulários para a aplicação

                . Fornece diretivas para criar e gerenciar formulários

                . Permiti a validação de dados de formulário

                . Fornece funcionalidades de binding de dados para formulários

                . Fornece diretivas, como:

                    . ngModel: diretiva para criar um binding de dados entre um formulário e um componente

                    . ngForm: diretiva para criar um formulário e gerenciar os dados de formulário

                    . ngFormGroup: diretiva para criar um grupo de formulários e gerenciar os dados de formulário

                    . ngFormControl: diretiva para criar um controle de formulário e gerenciar os dados de formulário

                    . ngFormArray: diretiva para criar um array de formulários e gerenciar os dados de formulário