Angular has released its latest version Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.
ng generate library <name>
e.g. :- ng generate library my-demo-lib
1. Material Sidenav
A starter component including a toolbar with the app name and the side navigation.
2. Material Dashboard
A starter dashboard component containing a dynamic grid list of cards.
3. Material Data Table
A starter data table component that is pre-configured with a datasource for sorting and pagination.
e.g. – Earlier we used to reference our services as below,
// In app.module.ts
@NgModule({
...
providers: [MyService]
})
export class AppModule {}
// In myservice.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}
This approach will still work but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:
// In myservice.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
} That is all about the features/improvements in the latest release of Angular. Let us move to create our first application using Angular 6.0.
Refer to the below image,
Since node and npm are installed, the next step is to install Angular CLI. Run the following command in a command window.
This will install Angular 6.0 CLI globally in your machine.
open VS Code and navigate to View >> Integrated Terminal.
This will open a terminal window in VS Code.
Type the following sequence of commands in the terminal window. These commands will create a directory with name “ng6Demo” and then create an Angular application with the name “ng6App” inside that directory.
Hence, we have created our first Angular 6 application using VS Code and Angular CLI. Now run the following command to open the project.
Refer to the image below :
This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.
{
"name": "ng6-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
} The name of our Angular application is ng6app which is inside ng6demo directory.
So, we will first navigate to our application using the below commands.
After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.
Now we will try to change the welcome text on the screen. Navigate to /src/app/app.component.ts file and replace the code with the below code.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Csharp Corner';
}Now open the browser, you can see that the web page has been updated with new welcome message “Welcome to Csharp Corner!”
Introduction Blazor is a .NET web framework that allows us to create client-side applications using…
Introduction In this article, we are going to create a sudoku solver with the help…
Introduction In this article, we will learn how to implement Azure serverless with Blazor web…
Introduction Angular is an open-source framework that allows us to create applications for multiple platforms…
Introduction In this article, we will create an optical character recognition (OCR) application using Angular…
Introduction In this article, we will create an optical character recognition (OCR) application using Blazor…
View Comments
can you give example of .net core 2 and Angular 6 example; Once I use npm install -g npm-check-updates; all broken
thanks for the useful example to start with angularJS
I must thank you for the efforts you've put in penning this site.
I am hoping to view the same high-grade content by you later on as well.
In fact, your creative writing abilities has motivated me to get my own site now
;)