angular-weekend-4

Shashikala, Tausif, Sushant, Vineet, Himanshu, Pooja, Shraddha

Basics

• 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

Components

• 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
• Lifecycle and its details

Project - Components

• Introduction
• Add navigation, event binding and ngIf
• Pass product data with property binding
• Pass data with event binding

Directives

• 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 products in a product service
• Cross component communication to select a product
• Add cart service
• Add product to cart
• Modify products in the cart

Routing

• [] Why routes ?
• [] Setting up Routes.
• [] Adding navigation to the app
• [] Marking active routes
• [] Fixing page reload issues
• [] Adding child routes
• [] Configure route parameters
• [] Styling active recipe item
• [] Adding edit route and recieve route parameters
• [] Programmatic navigation to the edit page

Forms

• [] Introduction to Reactive forms

Project - Forms

• [] Adding a sample form
• [] Adding validation to the form
• [] Adding the edit product form
• [] Adding the new product form
• [] Making all the forms functional

Pipes

• [] Why pipes ?
• [] Using pipes
• [] Parameterizing pipes
• [] Chaining multiple pipes
• [] Create a custom pipe

Http

• [] Understanding the Http module
• [] Get Request
• [] Put Request
• [] Delete Request
• [] Post Request