Constructing a User Interface with Angular
The user interface is the single most important part of your application, because to users, it IS the application. Nothing else matters. In this course, you learn how to deliver an easy, effective, efficient, and maintainable UI using Angular.
What you'll learn
At the core of any Angular project is how the user interacts with the application. In this course, Constructing a User Interface with Angular, you’ll learn how to deliver an easy, effective, efficient, and maintainable UI. First, you’ll learn the different elements involved in an Angular UI. Next, you’ll explore how to structure and develop an interface using those elements. Finally, you’ll discover how to do everything you need while maintaining performance and a loosely coupled architecture. When you’re finished with this course, you’ll have the knowledge and skills to help you as you move forward to Angular Awesomeness!
Table of contents
- Introduction 0m
- Templates and TemplateRefs 2m
- Querying the UI via ViewChild(ren) and ContentChild(ren) 4m
- TempateRef Selectors 4m
- ViewContainerRefs 4m
- HTMLElement as ElementRefs 1m
- ElementRef Selector Options - Read 6m
- ElementRef Selector Options - Descendants 8m
- ElementRef via Dependency Injection 0m
- QueryLists for Collections of UI Items 6m
- Wrap Up 1m
- Introduction 1m
- View Encapsulation 7m
- Shadow Piercing - Bypassing Shadow DOM 4m
- Building Custom Pipes - Dynamic Display Manipulation 3m
- Directive Selectors - More Than Just Attributes 6m
- Host Binding - Manipulating a Parent from a Child 6m
- Host Listening - Responding to a Parent From a Child 4m
- NativeElement and Renderer2 are NOT Bad 2m
- Getting and Using NativeElement Properly 7m
- JQuery as an Angular Anti-pattern 11m
- Wrap Up 1m
- Introduction 1m
- Using Built-in Content Projection 8m
- Wrapping Content in ngContainer 2m
- Building Templates with ngTemplate 1m
- ngIf-Else with ngTemplate 3m
- Rendering Content with ngTemplateOutlet 2m
- Dynamic Content with ngTemplateOutletContext 6m
- Component Inheritance 10m
- Dynamic Component Creation 2m
- Overview of the Widget Framework 3m
- Creating Dynamic Components Declaratively with ngComponentOutlet 5m
- Creating Dynamic Components Programmatically with ComponentFactoryResolver 4m
Course FAQ
You will learn how to design UI in Angular that is effective, efficient, and maintanable.
You don't need to be an Angular expert but after only brief introductory material, we will be diving right into Angular-based UI.
For this course on Angular UI Design, you should be familiar with Angular 2 or better.
The User Interface is often considered the most important part of an application because, to users, it IS the application.
About the author
Dave is the co-founder and CTO of Heirloom Software, a start-up using technology (including user-experience design, application development and big-data disciplines) to revolutionize the family-history and genealogy world. He has been "working with computers" for over 20 years, is an 11-time Microsoft MVP, and full-stack web developer, trainer and author focusing on JavaScript, NodeJS, document DBs and C#. He presents regularly at both technical and genealogy conferences.