Using If - Else syntax in Angular 2+

As we approach March 2017, Angular version 4 is almost here. Staying true to the official release schedule the first RC for Angular 4.0 has recently been released. There are many exciting new features, described in the release candidate changelog, like the improved view engine and server side rendering. Among them, is long awaited support for if - else syntax...

Read more

Accessing child component's class with ViewChild

Most communication between parent and child components in Angular 2+ happens with Input and Output bindings. However, in more complex cases you might want a direct access to a child component’s class instance. We can achieve exactly that using a powerful ViewChild decorator. This is especially useful if you have reusable self contained components, like a modal component. Realistically, the...

Read more

Testing Angular forms with dispatchEvent

When testing your Angular 2+ applications, make sure you don’t forget to test your forms as well. But obviously forms, especially template-driven forms (ngModel), are not something you would write unit tests for. Instead, you want to write shallow component tests, where you get access to native DOM elements that make up your application. Users will interact with your forms...

Read more

Dynamic guard redirects with route data in Angular 2+

If you are using the Angular 2+ router within your application, you probably encountered route guards. For those who don’t know, guards allow you to restrict specific routes based on certain criteria. In reality, guards are nothing but services that implement a CanActivate interface. Combine that with custom route data and we can dynamically redirect the user to different routes...

Read more

Testing Angular 2+ services with dependencies

Angular 2+ services can be tested in a couple of different ways, two most prominent being isolated tests and using the Angular 2+ TestBed. However, things get interesting when the service under test has dependencies (injected using Angular’s dependency injection). Isolated vs TestBed tests Isolated tests In short, tests are considered isolated when a fresh instance of your service class...

Read more

Angular component testing with routerLink and routerOutlet

Official angular 2+ testing documentation is a great place to start when it comes to testing your application, and while the docs are great and thorough, it might get a little hard trying to quickly find the info that you are looking for. Especially when things go wrong and you are in the middle of debugging your tests. One specific...

Read more

Validation for reactive forms in Angular 2+

As you might know, there are two prominent ways of creating forms in Angular 2+: Template-driven forms and Model-driven or Reactive forms. Template-driven forms definitely have a stronger correlation to how forms are created in AngularJS 1.x, in that they mostly rely on you declaring your form logic in the HTML template. Reactive forms however, are created from a configuration...

Read more