Angular 17 – How to create and use a component

A new look and a set of forward-thinking features Angular brings everyone along to the future with version 17, setting new standards for performance and developer experience.

What’s new

• Deferrable views which brings performance and developer experience to the next level
• Up to 90% faster runtime with a built-in control flow loops in public benchmarks
• Up to 87% faster builds for hybrid rendering and 67% for client-side rendering
• Fresh new look reflecting the future-looking features of Angular
• Brand new interactive learning journey
• …and dozens of other features and improvements!

With the new brand, Angular brings a new home for documentation — angular.dev.

How to create a project and components

Create a project

ng new <project_name>
cd <project_name>

Create a component

ng g c components/mycomponent

Open app.component.html, remove content and add the following line.

<app-mycomponent></app-mycomponent>

Open the app.component.ts and update imports.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { MycomponentComponent } from './components/mycomponent/mycomponent.component';

@Component({

selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, MycomponentComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.sass'
})
export class AppComponent {
title = 'Angular 17 Example';
}

Run the project

npm start

You can update the component name. Open the mycomponent.component.ts file and update the class name.

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

@Component({
  selector: 'app-mycomponent',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './mycomponent.component.html',
  styleUrl: './mycomponent.component.sass'
})
export class MyComponent {

}

Then update imports in the app.component.ts file.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { MyComponent } from './components/mycomponent/mycomponent.component';

@Component({

  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MyComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.sass'
})
export class AppComponent {
  title = 'redux';
}

• Share on Facebook