Angular Hello World
By AmarSivas | | Updated : 2021-03-16 | Viewed : 8498 times
In previous lesion we learned how to install the Node JS as well as Angular CLI. So here, we will create the Angular project by using the below given command. Here we can see basic features of the Angular.
First go the angular work-space folder. If you are not created then create work-space folder. There we need to perform the below given command to create the application
ng new HelloWorld-App
It will be installed all required modules. You can see in the command prompt. Here project root folder HelloWorld-App will be generated
Go to the project root folder i.e., HelloWorld-App, then execute the below given command.
ng serve --open
Open the browser and execute the below given URL. You can see the output.
http://localhost:4200/
Please change the app.component.html (template) as given below.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
Please change the app.component.ts (component) as given below.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'HelloWorld-App';
}Here we have changed the title in app.component.ts. While rendering the template the property of component will be binded to the template. This is nothing but property binding. We will discuss more about this later.
