This video is part of the Angular Advanced Library Laboratory: Build Your Own Library Course - https://angular-university.io/course/angular-advanced-course?utm=yt-ll-1-c&grpp=t&couponCode=ANGULAR_LIB_LAB_YOUTUBE
For more videos tutorials on Angular, check the Angular University website - https://angular-university.io
Twitter - https://twitter.com/AngularUniv
Google+ - https://plus.google.com/u/1/113731658724752465218
Facebook - https://www.facebook.com/angular.university
Check out the PDF E-Books available at the Angular University - https://angular-university.io/my-ebooks
In this video we will talk about Component API design, we will see how to make simpler and more maintainable components using ng-content and Angular content projection.
THIS COURSE IS IN PRE-LAUNCH PHASE - The Library Laboratory course covers Advanced Angular features typically used in library development - and How To Build Your Own Library with testing and animations, and deploy it on npm !
Versions used: The code repository of this course uses the Angular 4 release, Typescript 2.2 and the Yarn Package manager.
Would You Like to Build Your Own Open Source Library?
Probably all of us developers have thought at some point in time to build our own library and contribute to the overall open source community. The goal of this course is to give you all the tools necessary for you to be able to do your own open source Angular Library.
We will build a series of small open source libraries (about 7) of progressively increasing difficulty, and we will learn a large number of Angular advanced features in a very fun and practical way.
What Is The Best Way To Learn Advanced Angular Features?
Technology is never created in a vacuum - there are always certain original use cases for the appearance of a framework or even a framework feature. The best way to learn technology and according to some recent research to learn anything, in general, is something called "Deliberate Practice".
So the best way to learn Angular and its most advanced features are to simply take and use it to build something very concrete, like for example an application or a library -and do it in a step-by-step way.
This is of course very time-consuming to do without any help because we will have to learn everything by ourselves along the way as we build something, glueing together an endless number of blog posts, documentation and Stackoverflow answers.
Given this, here is what will do in this course: we are going to take Angular and use it to build a series of small reusable libraries. We are going to learn the advanced features of Angular in their original use cases, where they make the most sense and so are easier to learn.
What Will We Build In This Course?
In this course, we are going to start by getting familiar with the Node library ecosystem. We are going to learn how npm dependencies really work under the hood, and what are the features that have been making the NPM Node ecosystem explode with tens of thousands of packages.
We are going to learn how and why the frontend ecosystem will also soon start benefiting from those features. Then we will start building a series of libraries: Our goal is that at the end of the course combine all the libraries we have built to create a reusable real-world dynamic modal payment widget, that will allow the user to submit payments in both Stripe and Paypal.
We will split this major component into smaller libraries: As we will be introducing testing and all the ecosystem that comes with it, we will start simply by doing a Font Awesome customizable action button.
Then we will progressively increase the difficulty of each library: we will build a dynamic tab container that allows adding new tabs at runtime, a reusable dynamic modal component with customizable content, an input mask directive to help the user introduce card numbers, a payment panel with a validated form for entering card data.
What Will you Learn In this Course?
We will learn how to use the Angular CLI to create a AOT compatible library, how to define a library module, how to isolate the styles of a component but still make them customizable, how to design components and directives to make them easier to maintain - making them customizable while at the same time giving the components great default behavior.
We will cover all of the more advanced features of Angular, including Component API Design, Component Styling best practices, Templates and Template Outlets, ng-content, ng-container, style isolation and customization, AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren, Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components, directives, handling keyboard events, testing, animations and more (this is a non-extensive list).