• Real Time Signals India

Angular 4


This course enables the learner to provide interactivity to the webpage elements through the use of Angular 4.

Introduction to Angular

  • How a angular app loads

  • What is a component and how to create it

  • Understanding the role of App Module and component declaration

  • Creating components with CLI and nesting them

  • Component templates and styles

  • Component selector

  • What is databinding

  • String interpolation

  • Property binding

  • Event binding

  • Passing and using data with event binding

  • Two way data binding and why FormsModule ?

  • Understanding directives

  • Using ngIf with else condition

  • Styling elements with ngStyle

  • Applying classes with ngClass

  • Using ngFor to work with lists


  • Module introduction

  • Splitting Apps into components

  • Property and Event bindings overview

  • Binding to custom properties

  • Alias to custom properties

  • Binding to custom events

  • Alias to custom events

  • Understanding view encapsulation

  • Using local references in templates

  • Get access to Template and DOM using @ViewChild

  • Project content into components using ng-content

  • Lifecycle and its details

  • Access to ng-content using @ContentChild

Project - Components

  • Introduction

  • Add navigation, event binding and ngIf

  • Pass recipe data with property binding

  • Pass data with event binding

  • Allow user to add ingredients to shopping list


  • Introduction - diff b/w structure and non structure

  • ngFor and ngIf recap

  • ngClass and ngStyle recap

  • Create a basic attribute directive

  • Using renderer to build better attribute directive

  • Using HostListener to listen to host events

  • Using HostBinding to bind to host properties

  • Binding to directive properties

  • ngSwitch

Project - Directives

  • Make the dropdown work using a directive

Project - Services

  • Add service files

  • Manage recipes in a recipe service

  • Cross component communication to select recipe

  • Add shopping list service

  • Reactive service informing ingredient changes

  • Add ingredients to recipe

  • Pass ingredients from recipe


  • Why routes ?

  • Setting up Routes.

  • Adding navigation to the app

  • Marking active routes

  • Fixing page reload issues

  • Addig child routes

  • Configure route parameters

  • Styling active recipe item

  • Adding edit route and recieve route parameters

  • Programmatic navigation to the edit page


  • Introduction to Template driven forms

  • Creating the form and registering the controls

  • Submitting and using the form

  • Understanding form state

  • Acces the Form with @ViewChild

  • Adding validation to check user input

  • Built-in validators and using HTML5 validation

  • Using the Form state

  • Outputting Validation error messages

  • Set default values with ngModel binding

  • Handling Radio buttons

  • Setting and Patching form values

  • Using form data

  • Resetting the form

Project - Forms

  • Adding the shopping list form

  • Adding validation to the form

  • Adding the edit recipe form

  • Adding the new recipe form

  • Making all the forms functional


  • Why pipes ?

  • Using pipes

  • Parameterizing pipes

  • Chaining multiple pipes

  • Create a custom pipe

  • Parameterizing a custom pipe

  • Create a filter pipe

  • Understand async pipe


  • Understanding the Http module

  • Get Request

  • Put Request

  • Delete Request

  • Post Request

21 views0 comments