Angular 2 application with core API – Part 2


The angular template from dotnet cli is using the angular v4.4.6 LTS version. So we cannot use the latest angular v.5 APIs. After creating the angular components in earlier post now we need to write each component, if you use VSCode or Visual Studio this will be easy because the editor will provide intellisense for typescript syntax. Inside todo.components.ts, create a class named TodoComponent and decorate it with @Component to indicate the class as a component also it’s selector and a templateUrl. As for the template file todo.component.html, simply put an input text and a button then hook it up with the method inside the component. See the full code below.

Angular Component

Do the same thing with todoitem.component.ts, only for this one we need to add an Angular ActivatedRoute as dependency in it’s constructor. We need the angular ActivatedRoute to be able to read the route parameter, in this component the parameter is [id]. The parameter was registered when we declare a router inside app.shared.module.ts, this file is responsible for registering all components, services and modules that will be used in our angular clientapp(generated  by dotnet cli). Here is the snipped code for todoitem.component.ts and app.shares.module.ts

Inside each components you will see that i also create an interface as a datatype for each component, the purpose is for us to have a typed reference when creating an object or variable or etc. Note that this is why we use TypeScript instead of JavaScript, to help developer by providing a typed structure while developing angular application.

Angular Service

Both components also depend on a service class called TodoService, in angular, services are a great way to share information among classes (components) that don’t know each other. Before creating TodoService class, make a folder called service inside ClientApp/app/components/ then create a file Todo.service.ts inside it.

Dont forget to register todoservice inside app.shared.module.ts, put it in a providers[] decoration (see app.shared.module.ts code above).
And that’s it the app is ready and can be tested on your local machine.
Source Code

Published by Gadael Sedubun


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: