angular-weekend-batch-2

Saurav, Pankaj, Sridhar, Ravi, Ambuj, Kiran

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
• 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

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 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

Routing

• 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

Forms

• 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

Pipes

• Why pipes ?
• Using pipes
• Parameterizing pipes
• Chaining multiple pipes
• Create a custom pipe
• Parameterizing a custom pipe
• Create a filter pipe
• Understand async pipe

Http

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