Angular and MVC Core Architecture together in a nutshell: a real world example part 2
In this second post of this topic series, we will continue with what we have done in the first part where we setup the angular frontend project, and we go in depht of angular architetture and try to explain how angular component work. Let’s us now build step by step our angular side project as we describe in the first part.
First we need to install some library to help build the design, I’m suppose you have visual studio code open and a new terminal windows inside visual studio code open in the ClientApp folder (or a command line windows open from the ClientApp folder), go ahead and install from terminal command line:
npm install bootstrapwe also nead to install ng-bootstrap, an angular bootstrap library use to simplify angular and bootstrap integration, we will use some component of that library in our application as nest component.
npm install @ng-bootstrap/ng-bootstrapverify that the “dependencies” in the package.json file is looking like the image bellow where we can see that bootstrap and ng-bootstrap has been add to our node module package so that we can beginning to use bootstrap:

there are one more thing to do before using bootstrap, open “angular.json”, and insret the line bellow in the “styles” array so that angular cli will know where to take bootstrap css file and add to our application
"node_modules/bootstrap/dist/css/bootstrap.min.css",
we are now ready to add a new component to the project generate by angular cli tool. go ahead and run the following command:
ng g c navbarwe are telling angular cli to create a new component in the solution with the name “navbar” ( we can also write the full command like this : ng generate component navbar), this command will create a new folder name “navbar”, with 3 file inside: one four component template, one for css, and one for controller (the typescript file), record from the last post that angular follow a MVC approach

open “navbar.component.ts” and modify it so that it’s look like this (we have just add one dummy method to implement a refresh button, this will be clear at the end of this post)
also open “navbar.component.html”, and copy and past the code bellow
now, open the “app.component.html” file and replace all the content with the following line
<app-navbar></app-navbar>you can now try to run the app again by running the following command as you do in the first part (be sure you have save all the file inside the project):
ng serve --port 5200 -o
or just run
npm startyou’ll see the page bellow

we have just created our first component, if you record for the last post, we are trying to build angular component tree, you can view it by looking the following image:

as you can see, we have an application tree with one parent component (app component generate by angular cli), and only one child component (navbar component generaby us), our navbar cosiste of only some bootstrap element and an html button to reload our application (dashboard).
Now, as you have done above for “navbar component”, we are going to create the “dashbord component” which will held the rest of children component as you have seen in the image above. go ahead and create this component running the command bellow:
ng generate component dashboardWe need a dummy angular service (angular service will be a topic in a future post and can not be cover here)class for now to hold our data (in the aps.net core MVC in part 3, this will be replace with an http call to retrieve data from DB).
ng generate service services/monitoringdatathis last command will create a new file “monitoringdata.service.ts” inside a new folder call “services”, before inserting some code in this file, lets create some angular interfaces and class which will held our model data, fire the three commands bellow:
ng generate interface services/metricdatang generate interface services/nodedatang generate class services/randomdata
This will generate 3 file “metricdata.ts” ,“nodedata.ts” and “randomdata.ts” inside services folder, go ahead and copy/paste this snippet inside “metricdata.ts”
Copy/paste the following snippet inside “nodedata.ts”
and inside “randomdata.ts”, put the code bellow
Now, open “monitoringdata.service.ts” file and copy/paste the snippet code bellow:
That is not all to use the monitoringdata class into our application, we have to register it inside the module class so that angular will be able to inject it inside our component when it’s need in our application it by using dependency injection as we have described in the first post, so go ahead and modify your “app.module.ts” file so it will look like this:

Open the “dashboard.component.ts” file and paste this snippet:
to see what the data will be rendered inside our dashboard component just insert the code bellow in “dashboard.component.html”
<p>{{cluster1 | json}}</p>then also modify our “app.component.html” to add our dashboard in the component tree
<app-navbar></app-navbar>
<app-dashboard></app-dashboard>launch the application with “npm start or ng serve” command as we have already done above and you will get the following result

So our component tree it’s now looking like in this image, where we have one parent component with two children:

how to pass data to a component?
When you create your own components, you can define properties that can accept input through property bindings. Any default HTML element properties can also be bound to a component, but you can define additional properties that the component can use to manage its lifecycle or display.
By default, all properties of a component aren’t immediately bind-able. They must be declared as an input to allow the property to be bound. One reason
is that we want encapsulation of our components, and it’s best not to automatically expose all properties. Another reason is that Angular needs to know which properties exist so it can properly handle the wiring of values into a component. For exemple let’s us add another component call metric to display our azure data center metric data, The role of these components is to display the CPU and Memory metric information of the entire data center. Because the only difference between these components is the data, we’ll make it reusable, using inputs to pass data into the component. Go ahead and create this component by running the command bellow:
ng generate component metricyour metric.component.ts will content the following code
while the metric.component.html template will be looking like this
Make sure you have modify your app.module.ts file so that ng-bootstrap have been insert, because here , we are using ng-bootstrap progressbar to simulate the processing of our component metric.

You can now replace the dashboard.component.html template with the content bellow
Here is the result

The Metric component first imports the Input decorator, which is used to decorate any property that you want to define as an input. In this case, we have four inputs declared, which means that all the properties of this component are made available for binding. The Input decorator sits in front and will make each of the properties available for binding based on the name of the property.
So from now you kow how to create component and add them to the tree, and make a comunication from them, so will go ahead and complete all our component tree so that we have the whole solution, after we will try to explain some keyx points.
create 4 more component
ng generate component nodes
ng generate component nodes-row
ng generate component alert
ng generate component NodesDetailThe full solution is can be download from my github account here, you can then copy/paste all components template and controllers code from there, and when you’ll run the application, you’ll have a full project with all angular component tree.

When you click on the “view” button in the grid, you fire a dialog with the same metric component we have been using inside the dashboard component,
and on the top of the page, we have also put an alert component so we have our tree component design like we decide at the beginning of the first post. Fill free to see the code inside all component, an you can get the way the component are comunicating together, the code it’s very simple to get if you have read the first part of this series, where we put angular architetture in context and try to explain the life cycle of angular component, their will be something new like @ViewChild decorator or ng-content that we have not describe here because this can be the subject of another post, but @ViewChild like @input decorator are use to pass data from parent component to child component in certains case where we would like to dynamically get inside child component without passing data from html template, you can try to read all the project and see how component are link and comunicate together.

In the next post, we will try to explain asp.net core MVC architecture, his toolchain and how to make it work together with angular tool.
you can download the full code from my github account from here.
Share….
