Welcome to the Angular Tutorial. This Tutorial covers all versions of Angular Starting from Angular 2 to the latest editions of i.e. Angular 8, Angular 9 & Angular 10. We have created a simple and step by step tutorial for beginners to learn all the features of the Angular. The tutorial also covers some of the advanced Angular Tutorials.
This Tutorial Applies to Angular 2 Tutorial, Angular 7 Tutorial, Angular 8 Tutorial, Angular 9 Tutorial, Angular 10 Tutorial. Angular 11 Tutorial
Table of Content
- What is Angular
- Prerequisites
- Angular Tutorial
- Introduction to Angular
- Getting Started With Angular Tutorial
- Components
- Directives
- Pipes
- Component Communication
- Component Life Cycle Hook
- Angular Forms
- Services & Dependency Injection
- Angular Forms Validation
- HTTP
- Angular Router
- Angular Module
- Advanced Components
- Observable in Angular
- Styling the Application
- Others
- Configuration
- Handling Errors
- Angular CLI
- SEO & Angular
- Angular Universal
- Building & Hosting
- Angular Resources
- Angular how-to guides
- Module Loaders
What is Angular
The Angular is a development platform for building a Single Page Application for mobile and desktop. It uses Typescript & HTML to build Apps. The Angular itself is written using the Typescript. It now comes with every feature you need to build a complex and sophisticated web or mobile application. It comes with features like component, Directives, Forms, Pipes, HTTP Services, Dependency Injection, etc
Angular Versions
The early version of the Angular was named as Angular 2. Then later it was renamed to just Angular. Then Angular Team releases new versions of the Angular versions Regularly and the last stable version that is available in Angular 10.0.12
The Angular 9 is released on 06.02.2020. The Angular 9 is a major release. This release switches to ivy compiler and runtime by default. The ivy brings smaller bundle sizes, faster & better testing debugging, Improved type checking, build times, etc
Angular 10 is released on 24-06-2020. You can learn about the list of features from this link
Version History
Angular Version | Date | Description |
---|---|---|
Angular 2 | 14.09.2016 | Initial Version of Angular |
Angular 4 | 23.03.2017 | Version 4 |
Angular 5 | 11.11.2017 | Version 5 |
Angular 6 | 03-05-2018 | Version 6 |
Angular 7 | 18-10-2018 | Version 7 |
Angular 8 | 25-08-2019 | Version 8 |
Angular 9 | 06-02-2020 | Version 9 |
Angular 10 | 24-06-2020 | Version 10 |
Angular 10.0.12 | 24-08-2020 | Version 10.0.12 |
You can read the latest versions at https://github.com/angular/angular/blob/master/CHANGELOG.md
Prerequisites
The Angular tutorial requires a working knowledge of Javascript, HTML & CSS. It also requires the concept of OOP.
We are going to use Typescript as our language. If you have knowledge of C# or Java, then you would find it very easy. Take a look at the Typescript Tutorial
Angular Tutorial
Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular
Introduction to Angular
This Introduction to Angular Tutorial gives you a glimpse of Angular. Angular is a UI framework for building mobile and desktop web applications. It is built using Javascript. Using Angular you can build amazing client-side applications using HTML, CSS, and Typescript. It is very important to know how the Angular framework works before you start using it. The following tutorials introduce you to Angular and discuss Angulars architecture.
Getting Started With Angular Tutorial
The Angular has gone through a lot of changes since the version Angular 2. From the Angular 7 version, installing and creating a new project in angular has become very simple. The only thing you need to do in install and Visual Studio code, NPM Package manager & Angular CLI. Once, you install the required dependencies, creating a new project is as easy as running a simple command ng new
. Angular CLI takes care of Configuration & initialization of various libraries.
The following step by step tutorial will take you through the process of creating an Angular application
- Installing and Setting Up an Angular Development Environment
- How to Create a new project in Angular
- Bootstrapping in Angular
Components
The Component is the main building block of an Angular Application. A Component contains the definition of the View and the data that defines how the View looks and behaves. The Angular Components are plain javascript classes and defined using @component
Decorator. This Decorator provides the component with the View to display & Metadata about the class
The Component passes the data to the view using a process called Data Binding. This is done by Binding the DOM Elements to component properties. Binding can be used to display component class property values to the user, change element styles, respond to a user event, etc.
- Introduction to Angular Components
- Data Binding in Angular
- Interpolation in Angular
- Property Binding in Angular
- Event Binding in Angular
- Two way Binding & ngModel in Angular
- ngModelChange & Change Event
- Adding Child Component in Angular
Directives
The Angular directive helps us to manipulate the DOM. You can change the appearance, behavior, or layout of a DOM element using the directives. They help you to extend HTML. The Angular directives are classified into three categories based on how they behave. They are Component, Structural and Attribute Directives
The ngFor
is an Angular structural directive, which repeats a portion of the HTML template once per each item from an iterable list (Collection). The ngSwitch
allows us to Add/Remove DOM Element. It is similar to the switch statement of Javascript. The ngIf
allows us to Add/Remove DOM Element.
The ngClass Directive is an Angular Attribute Directive, which allows us to add or remove CSS classes to an HTML element. The ngStyle directive allows you to modify the style of an HTML element using the expression. Using the ngStyle you can dynamically change the style of your HTML element.
Pipes
The Angular pipes are used to Transform the Data. For Example, the Date pipe formats the date according to locale rules. We can pass arguments to pipe and chain pipes. The Angular also allows us to create the Custom Pipe
- Angular Pipes
- Angular Custom Pipes
- Date Pipe
- Async Pipe
- KeyValue Pipe
- Using Pipes in Components & Services
Component Communication
The Components are useless if they do not share data between them. The Parent Component communicates with the child component using the @Input
Annotation. The child components detect changes to these Input properties using OnChanges
life Cycle hook or with a Property Setter. The child component can communicate with the parent by raising an event, which the parent can listen.
Component Life Cycle Hook
The life cycle hooks are the methods that angular invokes on directives and components as it creates, changes, and destroys them. Using life-cycle hooks we can fine-tune the behavior of our components during creation, update, and destruction.
Angular Forms
The data entry forms can be very simple to very complex. The Forms contain large no of input fields, a variety of fields like Text boxes, Dates, Numbers, Emails, Password, Check Boxes, Option boxes, etc. These fields can Span multiple tabs or multiple pages. Forms may also contain complex validation logic interdependent on multiple fields.
The Angular forms modules are designed to handle all of the above and a lot more. The Angular Forms now supports Reactive forms approach to Forms development. The older way of Template-based approach is also supported
- Angular Forms Tutorial: Fundamental & Concepts
- Template Driven Forms in Angular
- Set Value in Template Driven forms in Angular
- Reactive Forms in Angular
- FormBuilder in Reactive Forms
- SetValue & PatchValue in Angular
- StatusChanges in Angular Forms
- ValueChanges in Angular Forms
- FormControl
- FormGroup
- FormArray Example
- Build Dynamic or Nested Forms using FormArray
- SetValue & PatchValue in FormArray
- Select Options Dropdown
Services & Dependency Injection
Services allow us to create reusable code and use it every component that needs it. The Services can be injected into components and other services using the dependency injection system. The dependencies are declared in the Module using the Provider’s metadata. The Angular creates a tree of injector & Providers that resembles the Component Tree. This is called the hierarchical pattern.
- Services
- Dependency injection
- Injector, @Injectable & @Inject
- Providers
- Hierarchical Dependency Injection
Angular Forms Validation
One of the common tasks that is performed, while building a form is Validation. The Forms Validation is built into the Angular Forms Module. The Angular provides several Built-in validators out of the box. If those validators do not fit your needs, then you can create your own custom validator.
- Validations in Reactive Forms in Angular
- Custom Validator in Reactive Forms
- Passing Parameter to Custom Validator in Reactive Forms
- Inject Service into Custom Validator
- Validation in Template Driven Forms
- Custom Validator in Template Driven Forms
- Angular Async Validator
- Cross Field Validation
- Adding Validators Using SetValidators
HTTP
The newly designed HttpClient Module allows us to query the Remote API source to get data into our Application. It requires us to Subscribe to the returned response using RxJs observables.
- Angular HTTP Client Tutorial
- HTTP GET Example
- HTTP POST Example
- Passing URL Parameters (Query strings)
- HTTP Headers Example
- HTTP Interceptor
Angular Router
The Router module handles the navigation & Routing in Angular. The Routing allows you to move from one part of the application to another part or one View to another View.
- Routing and Navigation in Angular
- Location Strategies in Angular Router
- Passing Parameters to Route
- Child Routes / Nested Routes
- Passing Optional (Query) Parameters to a route
- Navigation between Routes
- Angular Route Guards
- CanActivate Guard
- CanActivateChild Guard
- CanDeactivate Guard
- Angular Resolve Guard
- Angular Pass data to route
- RouterLinkActive
- Router Events
Angular Module
The Angular Modules help us to organize our code into manageable parts or block. Each block implements a specific feature. The Components, Templates, Directives, Pipes, and Services, which implements that feature become part of the module. The following tutorial explains, how best you can create an Angular Module, The folder structure that you can use, etc. We can also load the Modules lazily or Preload thus improving the performance of the Application.
- Introduction to Angular Modules
- Routing Between Angular Modules
- Angular folder structure: Best Practices
- Lazy Loading in Angular
- Preloading Strategy
- CanLoad Guard
Advanced Components
The Components in Angular are very powerful feature. The following tutorials take you through some of the important features of the Angular Component.
- Ng-Content & Content Projection in Angular
- Angular @input, @output & EventEmitter
- Template Reference Variable in Angular
- ng-container in Angular
- ng-template & TemplateRef in angular
- ngtemplateoutlet in angular
- HostBinding & HostListener
- ViewChild, ViewChildren & QueryList
- ElementRef
- Renderer2
- ContentChild & ContentChildren
- AfterViewInit, AfterViewChecked, AfterContentInit & AfterContentChecked
Observable in Angular
The Angular uses the Observable Pattern extensively. The following tutorials gives you an introduction to observable and how to use it in an Angular Application.
- Angular Observable Tutorial
- Create Observable from a string, array. object, collection
- Observable from events using fromEvent
- Observable pipe
- Map Operator
- CatchError
- SwitchMap
- MergeMap
- ConcatMap
- ExhaustMap
- ThrowError
- take, takeUntil, takeWhile, takeLast
- Unsubscribe from an observable
- First, last & Single
- DebounceTime & Debounce
- Tap Operator
- Filter Operator
- Skip, SkipWhile, SkipUntil & SkipLast
- Scan & Reduce
- Delay & DelayWhen
Styling the Application
The Angular uses several different ways to style the Application. You can style the app globally and then override it locally in the component very easily. The component styles have local scope, which is achieved using the various View Encapsulation strategies. Learn all these in the section
- Angular Global Styles
- View Encapsulation
- Style binding in Angular
- Class Binding in Angular
- Component Styles
- How to Install & Use Angular FontAwesome
- How to Add Bootstrap to Angular
Others
Configuration
The apps usually need some sort of Run-time configuration information like URL endpoint etc, which it needs to load at startup. Also, different environments like development, production & testing require different environments, etc.
Handling Errors
In the following Angular tutorials, we look at how Angular handles the error. We handle errors by setting up a Global Error handler or custom error handler. Also,.whenever the error occurs in an HTTP operation, the Angular wraps it in an httpErrorResponse
Object. Learn how to handle the HTTP Errors also.
Angular CLI
Learn how to use Angular CLI to speed up the development of Angular Application
SEO & Angular
You Website is useless if it is not found by the Search Engines. There are many things you must consider to make App SEO friendly. You need to set up Title & Meta Tags for each page. Ensure that the search engines can crawl and read your page. Set the correct Canonical URL for each page etc. Also, ensure that the app loads quickly, etc. The Following Angular Tutorials guides you through some of the important SEO features.
- Title Service Example
- Dynamic Title based on Route
- Meta Service
- Dynamic Meta Tags
- Canonical URL
- Lazy Load Images in Angular
Angular Universal
The following Angular Universal Tutorial explains how to achieve Server Side Rendering using Angular Universal. The rendering the App on the server side makes it load quickly and also ensures that the search engines can crawl the content
Building & Hosting
Angular Resources
Angular how-to guides
Module Loaders
The Angular application can use either SystemJs or Webpack module loader. We will demonstrate how to make use of both the Loader by building a small application.
Awesome!
Thanks 😊
awsome tuto , it would be more awsome if you add new section concerning unit test ( karma , jasmin ..)
thank a lot 🙂
For long time I just try to find Simple, Descriptive, Modularized and which have an Excellent Example Angular and TypeScript tutorials and I did not get Like this one, I like it very much Just I want to say Thank you.
very good explanation . Thank you
Excellent
This is one of the best angular tutorial that i found in internet. It covers each and every concepts in details. In my angular learning journey it helped me a lot. Thanks a lot!!.
Looking forward for ReactJS tutorial.
Best Tutorial I have found for beginners and mid level angular developers
Great work!. Great explanation and illustrations. Keep it up!
Can i get this entire tutorial in PDF format ?
Great Work!!!
amazing great work .
Excellent resource for learning Angular. Thank you for all your effort in putting together such great content. 🥇
Very informative tutorial and covered all topics.
Best tutorial on web for angular. Thanks guys.
Awesome Tutorial please Making a tutorial on Nodejs and MongoDb
Like the flow with simple explanation and examples. Most of the other sites are just want to dump a sample app but not clarify the concepts. U just mug the steps.
The balance of explanation and examples were very adequate
Excellent Tutorial, It helped me a lot…..Thank you
awesome tutorial
Really a great tutorial!!
Awesome Tutorials!!
Very intuitive, with great examples.
I’ve had a rough time learning Angular. I’ve tried a few tutorials and video classes. From what I’ve tried so far, tektutorialshub.com is the best. The descriptions explain complicated concepts and make a lot of sense. They have multiple examples on each subtopic. And there are so many chapters! I think I’ll be here a while!
awesomee work.great tutorials.This is the best angular tutorial which i have ever read.simply and understandable keep it up.
Easily Understandable. Thanks, Can you please provide a good example of making complete app from start to end like: Step by step of making Header, Navigation, Content area and Footer so that one can easily make a app after seeing that.
easily understandable tutorial. Please provide reactJs tutorial. thank you
Simply super tutorial
awesome tutorial
Extremely good tutorial! Thank you!