Angular 14
This course will teach you the high-level benefits, architecture, and latest features of Angular 14.
-
Module 1: Introducing Angular
-
Module 2: Introduction to TypeScriptTypeScript SyntaxProgramming EditorsThe Type System – Defining VariablesThe Type System – Defining ArraysType in FunctionsType InferenceDefining ClassesClass MethodsClass ConstructorsClass Constructors – Alternate FormInterfacesWorking with ES6 ModulesVisibility Controlvar vs letArrow FunctionsArrow Function Compact SyntaxArrow Function and Caller ContextTemplate StringsGenerics in ClassGenerics in Class
-
Module 3: Components
-
Module 4: Component TemplatesTemplatesTemplate LocationThe Mustache {{ }} SyntaxSetting DOM Element PropertiesEvent BindingExpression Event HandlerPrevent Default HandlingAttribute DirectivesApply Styles by Changing CSS ClassesExample: ngClassApplying Styles DirectlyStructural DirectivesConditionally Execute TemplateExample: ngIfLooping Using ngForngFor Local VariablesManipulating the CollectionExample – Deleting an ItemItem Tracking with ngForSwapping Elements with ngSwitchTemplate Reference Variable
-
Module 5: Inter Component CommunicationCommunication BasicsThe Data Flow ArchitecturePreparing the Child to Receive DataSend Data from ParentMore About Setting PropertiesFiring Event from a Component@Output () Example – Child Component@Output () Example – Parent ComponentFull Two-Way BindingSetting up Two Way Data Binding in Parent
-
Module 6: Template Driven FormsTemplate Driven FormsImporting Forms ModuleBasic ApproachSetting Up a FormGetting User InputOmitting ngForm AttributeInitialize the FormTwo Way Data BindingForm ValidationAngular ValidatorsDisplaying Validation State Using ClassesAdditional Input TypesCheckboxesSelect (Drop Down) FieldsRendering Options for Select (Drop Down)Date fieldsRadio Buttons
-
Module 7: Reactive FormsReactive Forms OverviewThe Building BlocksImport ReactiveFormsModuleConstruct a FormDesign the TemplateFormControl ConstructorGetting Form ValuesSetting Form ValuesThe Synchronous NatureSubscribing to Input ChangesValidationBuilt-In ValidatorsShowing Validation ErrorCustom ValidatorUsing a Custom Validator
-
Module 8: Services and Dependency Injection
-
Module 9: Pipes and Data Formatting
-
Module 10: HTTP ClientThe Angular HTTP ClientUsing The HTTP Client – OverviewImporting Http Client ModuleSimple ExampleService Using HttpClientMaking a GET RequestWhat does an Observable Object do?Using the Service in a ComponentError HandlingCustomizing Error Object with. catch ()Making a POST RequestMaking a DELETE Request
-
Module 11: The Angular Component RouterThe Component RouterView NavigationThe Angular Router APICreating a Router Enabled ApplicationHosting the Routed ComponentsNavigation Using Links and ButtonsProgrammatic NavigationNavigating with Route ParametersRetrieving a Route ParameterUsing the Feature ModuleLazy Loading the Feature ModuleCreating Links for the Feature ModuleComponentsMore About Lazy LoadingPreloading ModulesDefault RouteWildcard Route PathChild RoutesCreating Guard ImplementationsUsing Guards in a Route
-
Module 12: Advanced HTTP ClientRequest OptionsReturning an HttpResponse ObjectSetting Request HeadersCreating New ObservablesCreating a Simple ObservableThe Observable.create() MethodObservable OperatorsMore About mapPiping OperatorsThe flatMap() OperatorThe tap() OperatorThe zip() OperatorCaching HTTP ResponseMaking Sequential HTTP CallsMaking Parallel CallsCustomizing Error Object with catchError ()
-
Module 13: Unit Testing Angular ApplicationsUnit Testing Angular ArtifactsTesting ToolsTypical Testing StepsTest ResultsJasmine Test SuitesJasmine Specs (Unit Tests)Expectations (Assertions)MatchersExamples of Using MatchersUsing the not PropertySetup and Teardown in Unit Test SuitesExample of before Each and after Each FunctionsAngular Test ModuleExample Angular Test ModuleTest an Asynchronous MethodUsing Mock HTTP ClientSupplying Canned ResponseTesting a ComponentComponent Test ModuleCreating a Component InstanceThe Component Fixture ClassBasic Component TestsThe Debug Element Class
About The Course
This course will teach you the high-level benefits, architecture, and latest features of Angular 14 (latest release).
Angular 14 comes with all its newly added features and core updates.
- Angular CLI Auto-Completion.
- Strictly Typed Forms.
- Standalone Components.
- Enhanced Template Diagnostics.
- Streamlined Page Title Accessibility.
- Optional Injectors.
- Angular DevTools.
Course Objectives
This course teaches you about core aspects such as;
- Enhanced Template Diagnostics.
- Streamlined Page Title Accessibility.
- Optional Injectors.
- Angular DevTools.
Pre-Requisites
- Basic HTML and CSS
- Basic JavaScript
- Basics of Bootstrap
What's included
- 40 Hours Training Course
- Certificate
- 13 Module
- 24/7 Support
