Angular is an open-source platform and a JavaScript framework written in TypeScript for building single-page applications. Angular building blocks are components.
The file structure that is created by default in the Angular application components consists of the following files:
app.components.cssapp.components.htmlapp.componen.spec.tsapp.component.tsapp.module.tsWe’ll discuss the app.component.ts file in this shot.
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})export class AppComponent {title = 'angular';}
Line 1: The import of the Component class that is defined in the module @angular/core is being done in this line.
Lines 3-7: The reference to the selector, templateUrl, and styleUrls are given in the declarator. The selector is a tag that is used to be placed in the index.html file.
The Component decorator allows the user to tag a class as an Angular component. Additional information in the metadata determines how the component should be instantiated, processed, and used at the runtime.
selector identifies the directive in the template and triggers the instantiation of the respective directive.
templateUrl is the relative or the absolute path of the template file for an Angular component.
styleUrls are the relative or absolute paths containing CSS stylesheets for the component. There can be one or more URLs in the component decorator.
Lines 8-10: The AppComponent class has a title variable, which is used to display the application’s title in the browser. In this case, angular will be shown in the browser.
Free Resources