Angular 17: Gerar novo componente usando exemplo de comando

Angular 17 é uma estrutura poderosa para construção de aplicações web. Neste tutorial, você aprenderá como gerar um novo componente usando o comando Angular CLI e personalizá-lo de acordo com suas necessidades.

Criar novo aplicativo:

Se quiser testar do zero como gerar componentes no aplicativo angular, você pode executar o seguinte comando para baixar o novo aplicativo:

ng new firstApp

Agora nesse aplicativo, você pode gerar um novo componente usando o seguinte comando:

ng g c favorite

Agora você pode ver que ele irá gerar novos arquivos conforme a captura de tela abaixo:

Agora ele gera um novo componente no aplicativo angular 17. Você pode ver afetado nos seguintes arquivos:

app/favorite/favorite.component.html

Você pode escrever código HTML:

<h1>This is simple creating component Example - ItSolutionStuff.com</h1>
   
<p>favorite works!</p>

app/favorite/favorite.component.css

Você pode escrever código CSS:

p{ color:red }

app/favorite/favorite.component.ts

Você pode escrever o código Core Logic:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
  
@Component({
  selector: 'app-favorite',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './favorite.component.html',
  styleUrl: './favorite.component.css'
})
export class FavoriteComponent {
  
}

Ok, agora você pode entender o que deve escrever em quais arquivos.

Você também pode ver que eles adicionaram automaticamente FavoriteComponent na parte de importação do arquivo app.component.ts. como abaixo:

app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { FavoriteComponent } from './favorite/favorite.component';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FavoriteComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'first-app';
}

Agora você pode usar FavoriteComponent em seu arquivo de visualização conforme abaixo:

app/app.component.html

<app-favorite></app-favorite>

Execute o aplicativo Angular:

Todas as etapas necessárias foram executadas, agora você deve digitar o comando abaixo e pressionar Enter para executar o aplicativo Angular:

ng serve

Agora, vá para o seu navegador, digite o URL fornecido e veja a saída do aplicativo:

http://localhost:4200

você pode ver o layout abaixo:

Você também pode gerar um novo componente dentro de algum diretório. Você pode tentar o comando abaixo:

ng g c admin/users

#angular