Child component example in Angular 6

Angular applications are built with a set of components often nested set of components. We can embed a component inside another component using the nested components selector tag. Let us create a very basic child component and embed it in the home component.

Let us start with creating a child component using the following command

ng g c child

The command will create a component class file child.component.ts and a template file child.component.html. In this example we will not make any changes to the class file, we will add a simple message to the template file.

Route Guard example in Angular 6

Let us extent our Angular Routs example and add some route guards to the example. Let us add the most basic route guard CanActivate to the example. Let us begin by adding 2 services auth service and a route-guard service as follows.

ng g s auth

ng g s route-guard

Angular Route Guards

Route Guards are special validation checks which can be used to validate requests to load specific routes/modules, we can validate the request and either accept or deny the request to load the route. Route guards return a true/false value which decides where the user can access the route or not.

There are 5 route guards

Routing example in Angular 6

Routing in Angular is a feature which helps us to load different components in the UI based on user actions like clicking a link etc. Apart from clicking on the links we can also change the URL in the browser and view the components mapped to the various routes.

Let us start with a basic Routing example, let us begin by creating a new component routeApp by running the ng generate component command as follows.

ng generate component routeApp

Observable example in Angular 6

An Observable is a way to execute asynchronous operations, in Angular Observable is supported using the RxJs library. An Observable makes an asynchronous request and returns the success response or an error if the request fails. The most common usage of observable is to make API calls to services to get data. Let us see on how to make async calls using observable to get data and display it in UI using Angular.

The Angular HttpClient library by default gives an Observable, let us use the Observable to get API data and display the results in the Component UI.

Let us extend our previous Promise example, we will use the same userdata.service from the previous example and add an Observable to it. This way we can compare the Promise and Observable in the same example code.