ANGULAR 11 TUTORIAL | ANGULAR INTRODUCTION & ANGULAR INSTALLATION | ANGULAR STEP BY STEP TUTORIAL | COMPONENT, SERVICES, DIRECTIVES, PIPES & MODULES IN ANGULAR

Share the post

Hello All, This is the new topic we are starting from today from scratch!! In this angular tutorial, We are going to learn What is angular? How to install angular in our system? The step-by-step tutorial to learn everything about angular 11. We will also learn What is a component in angular? How to generate a new component using CLI (Command Line Interface)? What are the services in angular? What are directives in angular? What is the command to create a custom directive in angular? What are the pipes in angular? What is the command to create a custom pipe in Angular? What are the modules in angular? & How to generate a new module in angular?

What is angular?

Angular is a Open Source Framework used to develop progressive web application (PWA), mobile application & tablet application.

What is the latest stable version of Angular?

Current Version (Stable) : 11.2.9 (Till date)

Introduction of Angular 11

  • It’s Developed & Maintain by Google
  • Widely used to develop a progressive application
  • Very popular & having large community

How to Install Angular 11?

  • Before installing angular make sure you have installed node JS & Visual Studio Code in your system.
  • Write the command in command prompt => npm install -g @angular/cli
  • Create a basic project using command => ng new angular-helloworld-example
  • Go to project folder path using command => cd angular-helloworld-example
  • Run the newly created project on the browser using command => ng serve
  • You check the current version installed on your system using command => ng version

What is a component in angular?

Component are the block which controls the HTML View.

How to generate a new component in angular?

Use following command to generate a new component in angular

ng g component component/home

NOTE : home is the name of component. You can replace it with your component name.

What is service in angular?

services are global classes which can be used to share the data across multiple components.

What is the command to generate a new service in angular?

We can able to generate a new service using following command

ng g service service/http

NOTE : http is the name of service. You can replace it with your service name.

What is directive in angular?

Directive use to add behavior to existing DOM (Document object model).

What is the command to generate a custom directive in angular?

ng g directive directive/background-color

NOTE : background-color is the name of directive. You can replace it with your directive name.

What is a pipe in angular?

Pipe will take the user input & transform it into desired output.

What is the command to generate a custom pipe in angular?

ng g pipe pipe/lowercase

NOTE :lowercase is the name of pipe. You can replace it with your pipe name.

What are modules in angular?

Modules are the set of directive, services, components & pipes.

What is the command to generate a new module in angular?

ng g module Dashboard

NOTE : Dashboard is the name of module. You can replace it with your module name.

& then we can generate a new component inside this module using following command

ng g component Dashboard/dashboard-users

NOTE : dashboard-users is the name of component. You can replace it with your component name.

Leave a Comment