Free Course Image Angular 13 step

Free online courseAngular 13 step

Duration of the online course: 9 hours and 55 minutes

3.67

StarStarStarHalf star

(3)

Learn Angular 13 step-by-step with this free online course from Procademy. Master web development with Angular basics, components, directives, services, routing, and more.

In this free course, learn about

  • Angular Fundamentals and Project Setup
  • Components and Templates
  • Data Binding and Component Communication
  • Built-in Directives and Structural Directives
  • Advanced Component Interaction and Encapsulation
  • Lifecycle Hooks and Content Projection
  • Custom Directives and Host Bindings
  • Services and Dependency Injection
  • Observables and RxJS
  • Routing and Navigation
  • Route Guards and Advanced Routing
  • Pipes and Data Transformation
  • Template-driven Forms
  • Reactive Forms and Validation

Course Description

The course "Angular 13 Step by Step" provides an extensive and meticulously structured learning experience in the realm of Angular web development. This comprehensive course spans a duration of 9 hours and 55 minutes, immersing students in the robust features and functionalities of Angular 13. Garnering an admirable average rating of 5 stars, it stands as a testament to its high-quality content and effective pedagogy, making it an indispensable resource for both novices and seasoned developers within the Information Technology domain, especially in Web Development.

Beginning with an insightful introduction to Angular, the course delves into fundamental concepts, laying a solid foundation for learners. It covers the essential aspects, from understanding Angular and setting up projects to working with Angular files. Learners are introduced to TypeScript, a key component of Angular, and are guided through the process of executing an Angular project efficiently.

One of the major highlights of this course is its in-depth coverage of components, a core concept in Angular. The curriculum meticulously explains the creation of custom components, the significance of template and styles properties, and how to incorporate Bootstrap for enhanced visual appeal. The course further explores various selectors, providing learners with the dexterity to employ different strategies for data binding, including string interpolation, property binding, event binding, and two-way data binding.

Directives, another pivotal aspect of Angular, are also comprehensively covered. Learners gain practical insights into using various built-in directives like ngFor, ngStyle, ngIf, and ngClass, along with the knowledge to create custom attribute and structural directives. The course elucidates on child components, custom property binding using decorators, and event binding, enabling learners to implement complex functionalities with ease.

As learners progress, the course introduces more advanced concepts like Angular Life Cycle Hooks and View Encapsulation. Real-world applications come into play as the course navigates through services and dependency injection, clarifying how to create services and leverage hierarchical injection to create robust, scalable applications. Significant attention is given to the concept of Observables and RxJS operators, equipping learners with the ability to handle asynchronous data streams effectively.

Routing, a critical feature for building Single Page Applications (SPAs), is extensively dissected. From implementing basic navigation to configuring navigation links, the course covers everything, including route guards and navigation events, ensuring learners can create secure and navigable applications. Moreover, the course also touches upon creating custom pipes and utilizing built-in ones to handle data transformations seamlessly.

The course rounds off with a thorough exploration of Angular forms, an essential component for any web application. It covers both template-driven and reactive forms, detailing form validation, form control groups, handling radio buttons, and retrieving and resetting form data. The intricacies of custom validation, including async validators, are also demystified, thus providing a complete toolkit for creating forms in Angular.

Overall, "Angular 13 Step by Step" is a quintessential course for anyone aiming to master Angular. Its structured approach, covering all foundational and advanced topics, ensures that learners are well-prepared to implement robust, maintainable web applications using Angular 13.

Course content

  • Video class: Introduction to Angular I Angular Basics | Angular 12 08m
  • Exercise: _What is Angular and what is its purpose?
  • Video class: Angular Project Setup 08m
  • Exercise: What is the initial step to create an Angular application?
  • Video class: Working with Angular Project | Angular Basics | Angular 12 18m
  • Exercise: What command is used to start the live development server in an Angular project?
  • Video class: Angular files 09m
  • Exercise: Which folder in an Angular project is excluded from production deployment and reserved for development purposes?
  • Video class: What is TypeScript | Angular Basics | Angular 12 05m
  • Exercise: _What is TypeScript?
  • Video class: How Angular project is Executed | Angular Basics | Angular 12 06m
  • Exercise: What is the starting point of an Angular application execution?
  • Video class: What is a Component | Components | Angular 12 05m
  • Video class: Creating a Custom Component | Components | Angular 12 21m
  • Video class: Template property of Component | Components | Angular 12 06m
  • Exercise: _What is the difference between the template property and template url property in Angular?
  • Video class: styles property of Component | Components | Angular 12 06m
  • Exercise: How can you apply inline CSS styles to a component's view template in Angular?
  • Video class: Using Bootstrap in Angular | Components | Angular 12 06m
  • Exercise: How to integrate Bootstrap in an Angular application?
  • Video class: Different Selectors in Angular | Components | Angular 12 04m
  • Exercise: How can a component selector be used in Angular?
  • Video class: What is data binding | Data Binding | Angular 12 03m
  • Exercise: _What is data binding in Angular?
  • Video class: What is String Interpolation | Data Binding | Angular 12 08m
  • Exercise: What is the purpose of string interpolation in Angular?
  • Video class: What is Property Binding | Data Binding | Angular 12 06m
  • Exercise: What is the purpose of property binding in Angular?
  • Video class: What is Event Binding | Data Binding | Angular 12 16m
  • Exercise: What does event binding in Angular allow you to do?
  • Video class: Two way data binding | Data Binding | Angular 12 05m
  • Video class: What is Directives | Directives | Angular 12 03m
  • Exercise: What are directives in Angular used for?
  • Video class: ngFor Directive in Angular | Directives | Angular 12 11m
  • Exercise: What is the primary purpose of the ngFor directive in Angular?
  • Video class: ngStyle Directive in Angular | Directives | Angular 12 05m
  • Exercise: How does the ngStyle directive in Angular function?
  • Video class: ngIf Directive in Angular | Directives | Angular 12 13m
  • Exercise: _What is the purpose of the ngif directive in Angular?
  • Video class: ngClass Directive in Angular | Directives | Angular 12 07m
  • Video class: What is Child Component | Components | Angular 12 11m
  • Video class: Custom Property Binding: @Input Decorator | Data Binding | Angular 12 13m
  • Video class: Custom event Binding: @Output Decorator | Data Binding | Angular 12 22m
  • Video class: Implementing Search Functionality | Data Binding | Angular 12 13m
  • Video class: Template Reference Variable | Data Binding | Angular 12 18m
  • Video class: @ViewChild in Angular | Data Binding | Angular 12 19m
  • Video class: What is View Encapsulation in Angular | View Encapsulation | Angular 12 13m
  • Exercise: _What is view encapsulation in Angular?
  • Video class: ng-content in Angular | Directives | Angular 12 12m
  • Video class: Angular Life Cycle Hooks | Lifecycle Hooks | Angular 12 18m
  • Video class: Angular Lifecycle Hook in Action | Lifecycle Hook | Angular 12 29m
  • Video class: @ContentChild in Angular | Data Binding | Angular 12 09m
  • Exercise: _What is the use of Content Child Decorator in Angular?
  • Video class: Custom Attribute Directive | Directives | Angular 12 12m
  • Video class: Renderer2 in Angular | Directives | Angular 12 12m
  • Video class: @HostListner in Angular | Directives | Angular 12 12m
  • Video class: @HostBinding in Angular | Directives | Angular 12 08m
  • Exercise: _What is the purpose of the host binding decorator in Angular?
  • Video class: Binding Directive Properties | Directives | Angular 12 11m
  • Video class: Custom appClass directive | Directives | Angular 12 20m
  • Video class: Conditional Directive in Angular | Directives | Angular 12 13m
  • Video class: Custom appStyle Directive | Directives | Angular 12 16m
  • Exercise: _What is the purpose of the app style directive in Angular 13?
  • Video class: How Structural Directive Works | Directives | Angular 12 10m
  • Video class: Custom Structural Directive | Directives | Angular 12 17m
  • Video class: ngSwitch Directive in Angular | Directives | Angular 12 05m
  • Video class: Services in Angular | Services 08m
  • Exercise: _What is an Angular service and why do we need it?
  • Video class: Creating a Service in Angular | Services 16m
  • Video class: Dependency injection in Angular | Services 07m
  • Video class: Hierarchical Injection in Angular | Services 10m
  • Video class: Creating a Data Service | Services 23m
  • Video class: Injecting Service into another Service | Services 13m
  • Video class: Component Interaction with Services | Services 00m
  • Video class: What is Observable | Observables | Angular 12 00m
  • Video class: Error 00m
  • Exercise: _What is the purpose of the error method in an observable?
  • Video class: Different ways of Creating Observable | Observables | Angular 12 00m
  • Video class: Understanding Operators of RxJS | Observables | Angular 12 00m
  • Video class: Subjects in RxJS | Observables | Angular 12 00m
  • Video class: Unsubscribe to an Observable | Observables | Angular 12 00m
  • Exercise: _What is the purpose of unsubscribing to an observable in Angular?
  • Video class: What is Routing in Angular | Angular Router | Angular 13 00m
  • Video class: Implement Page not found Route | Angular Router | Angular 13 00m
  • Video class: Configuring navigation links for Route | Angular Router | Angular 13 00m
  • Video class: Styling Active link using routerLinkActive | Angular Router | Angular 13 00m
  • Exercise: _What is the main use case of the "router link active" directive in Angular?
  • Video class: Absolute and Relative Route Paths | Angular Routing | Angular 13 00m
  • Video class: Navigate between Routes Programmatically | Angular Router | Angular 13 00m
  • Video class: Passing Parameters to Route | Angular Routing | Angular 13 00m
  • Video class: Using Observable to Retrieve Route Parameter | Angular Routing | Angular 13 00m
  • Exercise: _What is the reason why the content does not change when the value of the id parameter changes in the example given in the lecture?
  • Video class: Passing Query Parameters to Route | Angular Route | Angular 13 00m
  • Video class: Passing Fragments to Route | Angular Routing | Angular 13 00m
  • Video class: What is Child Routes in Angular | Angular Routing | Angular 13 00m
  • Video class: Creating a Route Module File | Angular Router | Angular 13 00m
  • Exercise: _Where do we define the routes if we have more than two or three routes defined in our Angular application?
  • Video class: What is Route Guard in Angular | Angular Routing | Angular 13 00m
  • Video class: CanActivate Route Guard in Angular | Angular Route | Angular 13 00m
  • Video class: CanActivateChild Route Guard in Angular | Angular Routing | Angular 13 00m
  • Video class: CanDeactivate Route Guard in Angular | Angular Routing | Angular 13 00m
  • Exercise: _What is the purpose of the can deactivate route guard in Angular?
  • Video class: Resolve Route Guard in Angular | Angular Routing | Angular 13 00m
  • Video class: Navigation Events in Angular | Angular Routing | Angular 13 00m
  • Video class: Creating Custom Pipes in Angular | Angular Pipes | Angular 13 00m
  • Video class: Creating Filter Pipe in Angular | Angular Routing | Angular 13 00m
  • Exercise: _What is the purpose of the filter pipe that we are creating in this lecture?
  • Video class: Pure Pipes in Angular I Angular Pipes | Angular 13 00m
  • Video class: Impure Pipes in Angular | Angular Pipes | Angular 13 00m
  • Video class: Data Filtering in Angular Component | Angular Pipes | Angular 12 00m
  • Video class: async pipe in Angular | Angular Pipes | Angular 13 00m
  • Exercise: _What is the purpose of using a sync pipe in Angular?
  • Video class: Pipes in Angular | Angular Pipes | Angular 13 00m
  • Video class: Template Driven Form in Angular | Angular Forms | Angular 13 00m
  • Video class: Template Driven Form Validation in Angular | Angular Forms | Angular 13 00m
  • Video class: Form Control Group in Template Driven Form | Angular Forms | Angular 13 00m
  • Exercise: _What is the purpose of using the ng model group directive in Angular?
  • Video class: Working with Radio button in Template Driven Form | Angular Forms | Angular 13 00m
  • Video class: setValue() 00m
  • Video class: Retrieving Form Data and Reseting Form | Angular Forms | Angular 13 00m
  • Video class: Creating and Using Reactive Forms | Angular Forms | Angular 13 00m
  • Exercise: _What are the two ways to create a form in Angular?
  • Video class: Form Validation of Reactive Forms | Reactive Form | Angular 13 00m
  • Video class: Grouping of Form Controls | Reactive Form | Angular 13 00m
  • Video class: What is Form Array | Reactive Forms | Angular 13 00m
  • Video class: Custom Validation and Error Code | Reactive Forms | Angular 13 00m
  • Exercise: _What is an error code for a validator in Angular?
  • Video class: Custom async validator | Reactive Forms | Angular 13 00m

This free course includes:

9 hours and 55 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

Course comments: Angular 13 step

Fatima Mohamud

its benefit course and i thanks to meet courses like this

More free courses at Web Development

Download the App now to have access to + 3300 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 48 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate

+ 9 million
students

Free and Valid
Certificate

60 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video and ebooks