John Lindquist is a co-founder of egghead.io
John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.
showing 290 lessons...
Just like passing in an array to
*ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the
*directive syntax expands into a
<template> and adds a custom
@Input based on the syntax you use so that you can use your own data.
You can change behaviors of element and
@Component properties based on services using
@Directives. This allows you to build
@Directives which rely on services to change behavior without the
@Component ever needing to know that the Service even exists.
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of
<template> elements, but they're easy and extremely powerful once you undrestand the concepts.
@Directive is used to add behavior to elements and components in your application. This makes
@Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.
@Input decorator allows you to pass values into your
@Directive so that you can change the value of the Directive each time that it is used. Using
@Input makes your Directives much more flexible and reusable so they can adapt to many different situations.
Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own
app.vue layout in a
layouts directory. Then you simply surround your content (the
<nuxt> instance) with your navigation and/or layout and you're ready to go.
The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.
A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.
The foundation of animation in Angular 2 is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.
Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.
Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.
ngClass is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so
ngClass comes to the rescue.
Components push out events using a combination of an
@Output and an
EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use
@Output to create an update event and then listen for the even in your application.
Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.
Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of the Angular 2 components so that you can start building quickly.
Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the
#ref syntax, assigning it a name, then
ngModel will check all of the validity rules for you.
ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2
FormsModule and use the proper syntax around the
ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.
Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.
ngModel exposes more than just validity, it even gives you the states of whether the
input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.
Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their
labels will match up with each input. This lesson shows how to use
*ngFor with radio buttons and covers the quirks of the
id property and
for attributes as well as how to style validation of radio buttons.
Inputs using Angular 2’s
ngModel automatically apply style classes of
.ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the
styles in your
ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way.
ngModelGroup is often used in combination with
fieldset as they mostly represent the same idea of “grouping together inputs.”
Forms in Angular 2 are essentially wrappers around
inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s
ngForm allows you to get a reference to that object and validity and use them to display information about the form or use the
ngSubmit event to save information from the form.
Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s
createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.
A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.
You can load resource based on the url using the a combination of
ActivatedRoute and Angular 2’s
Http service. Since the params and
Http are both streams, you can use RxJS to get the data off the param then
switchMap over to an
Http request using that data.
Http service, you can load in data to create your
routerLink navgation. This builds on the same concepts of using
*ngFor, but since
Http uses streams, you’ll need to use the
| async pipe to be able to properly display the loaded data.
It’s often easier to build out your navigation dynamically so that you have programmatic control of which navigation elements appear (and those which don’t). You can leverage the power of Angular 2’s
*ngFor directive to build out navigation based on any set of data you provide with urls.
<base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use
/ as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.
Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the
ActivatedRoute are provided as streams, so you can easily
map the param you want off of the stream and display it in your template.
You can easily show the user which route they are on using Angular 2’s
routerLinkActive. Whenever a route matches the
routerLink defined on the element, then the
routerLInkActive will add the class that you assign it to.
Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular 2’s module pattern so that files that belong to each module don’t get required by other modules.
You can place content inside of the instance of your component element then manage it inside of the component’s template using
ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”.