Hello World in Angular

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.

2. Run the CLI command ng new and provide the name Hello-world, as shown here:

Create the Project in Angular

  ng new Login

app.component.html

the component template, written in HTML.

<h1 id="heading">Hello World in Angular</h1>

<router-outlet></router-outlet> 

app.component.ts

the component class code, written in TypeScript.

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'hello-world';
}

app.module.ts

the main parent component app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
 AppComponent
  ],
 imports: [
 BrowserModule,
 AppRoutingModule
  ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

To Run the file

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

  ng server -o

Output

Contact Us Now for more