Customize default Angular Application

Display title from the default angular application

Introduction

This requires you to have the basic Knowledge of angular folder structure.

To display a custom title

Step 1: Edit the title in app.component.ts

Change the text to whatever you like

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My first Angular application';
}

Step 2: Edit the app.component.html

This file will display the text in a header but you can manipulate it to suit your needs. Delete the default code in this file and replace it with

<h1>{{title}}</h1>

Step 3: To style our title, edit or add you styles to the style.css file outside the class, this css will apply to other files in the project.

/* You can add global styles to this file, and also import other style files */
h1{
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 950%;
 text-decoration-color: blueviolet;
}

let’s run our app to see the changes

ng serve --open

Congratulations you have made your first milestone in angular.

Happy coding!!!!!!!!!!!!!!!!!!