Angular 17 standalone component
In this example, we'll see an angular 17 standalone component for rendering a router outlet.
A standalone component is a new feature in Angular 14 that allows you to create and use components without a parent module.
A component in angular is responsible for controlling a region of the user interface of the application that is rendered by the component. An angular 17 application has one root component which is the main component that would be bootstraped when the application is launched.
In Angular 17, we can bootstrap a component directly without using a module.
An example of an Angular 17 app component
This is an example of a basic angular 17 root component that renders a router outlet. In the src/app/app.component.ts
file we have the following typescript code:
import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone:true,
imports:[RouterModule]
})
export class AppComponent implements OnInit {
title = 'Angular 17 App';
constructor(){}
ngOnInit(): void{}
}
The component implements the OnInit interface that provides the ngOnInit()
lifecycle method that gets called when the component is initialized.
The component's decorator contains meta data about the component such as the selector that will be used to include the component in a template, and the paths of the associated template and stylesheets that will be used to render and style the component view. Moreover, we need to add standalone:true
to make the component standalone.
Since the component doesn't have a parent module, we need to the imports
array to import the router module.
In the src/app/app.component.html
, we place the router outlet:
<router-outlet></router-outlet>
In the src/main.ts
file, we need to bootstrap the application component as follows:
import { CommonModule, registerLocaleData } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication} from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { routes } from './app/app-routing';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent,
{
providers:[
importProvidersFrom(
RouterModule.forRoot(routes),
BrowserAnimationsModule,
HttpClientModule)
]
});
Generate a component with Angular CLI v17
You can use Angular CLI v17 to scaffold a simple component as follows:
ng g component footer
In the src/app/footer.component.html
file we have the following html code:
<p>
ngApp (c) 2022
</p>
In the src/app/footer.component.css
file we have the following css code:
p {
margin: 1rem;
}
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
-
Date:
Related posts
Angular Signals & Forms Angular 16 Injecting Service without Constructor Angular @Input View Transitions API in angular 17 tutorial View Transitions API in angular 17 tutorial Dynamically loading Angular components Angular 17 AfterRender & afterNextRender Angular Standalone Component Routing Angular Standalone Components vs. Modules Angular 17 resolvers Angular 17 Error Handling: What's New and How to Implement It Angular Signals in templates Angular Signals and HttpClient Angular Signals CRUD step by step Angular Injection Context: What is it and how to use it Angular Injection Context: What is it and how to use it How to Avoid Duplicate HTTP Requests Angular 17 — Deferred Loading Using Defer Block Asynchronous pipes in Angular: A Deeper dive Top 5 Angular Carousel Components of 2023 Angular 17 Material Multi Select Dropdown with Search Angular 17: Enhanced Control Flow Simplified with Examples Angular 17 Material Autocomplete Multiselect Step-by-Step Angular 17 Material Autocomplete Get Selected Value Example Angular 17 Material Alert Message Step by Step A Step-by-Step Guide to Using RxJS combineLatestWith RxJS Buffer: An Effective Tool for Data Grouping and Filtering Angular 14+ standalone components Angular v17 tutorial Angular 17 CRUD Tutorial: Consume a CRUD REST API Upgrade to Angular 17 Angular 17 standalone component Add Bootstrap 5 to Angular 17 with example & tutorial Angular 17 due date and new features Angular 17 Signals ExplainedHands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!