Building Components
using Angular CLI

A Few Of My Thoughts

We are on our way to becoming REAL programmers. All of you will get to a point when you will be able to identify if you are a programmer, and what that means to you. A very large part of programming is developing software with a team. How do you do successfully collaborate within a 4 person team? What about a 20-person team? Over this course, I will introduce you to an enterprise software development cycle that is proven to work across the board for most projects.

More importantly, we will be learning CODE! Yes, I mean, we will actually write real CODE. The Angular framework will allow us to build complex and eloquent web applications that we are able to see in our browsers. The various topics and the course in general will be challenging! However, we will all get through it together. We will deal with BIG WORDS, new concepts, and learn how to problem solve.

So why am I doing this? I love programming. I want to share this passion that I have with all of you. I want to knock down the walls that prevent completely capable minds from exploring this skill. I am learning as well! Teaching allows me to grow in my own depth of knowledge and take a break from my daily development tasks. I truly believe that anyone can benefit from this! Even if it’s just learning more about the technology of web applications, I know this will be a great experience.

I am excited! I hope you all are as well! So let’s dive in!


Components

Overview:

Components are bits of Javascript code telling Angular, the framework that our application is using, what to do. More specifically, it tells Angular how to render or show different parts of the web application. The app component is the root component, which holds all the components that we will be building. These components have a view and logic that work with other components which makes up our app.


How To Identify Components

Using the image below, are you able to identify the potential components? When we build web applications with Angular we have to think about how our view breaks up into many components, and in many cases, components within other components!




Can you break up the components as they are below? While Angular doesn't have restrictions on how we really structure our components. We will see very quickly how important it is for us to design and plan how our we organize our components. With that said, lets build an Angular web application and add our first component to it!



Angular Project Steps

Note: You will need to have the angular cli installed gloabally. If you are not sure what this means, please read my other blog post Building Web Applications with Angular 2


    If we navigate to the browser, you should notice that the text looks a little different. Essentially we now can use all the amazing things bootstrap gives us

  1. Create a new angular project via the angular cli

    Run the following command:

      ng new component-lesson

    Now we have our base project set up. You can go ahead and build and server your project so you can see it within the browser

    Within the root of your project, run the following within your terminal:

      ng build && ng serve

    Now localhost:4200 within your browser will show your newly created project

  2. To prevent us from immediately worrying about styling, we can update our index.html file so we are importing bootstrap 4, and its dependiences. Update src/index.html to the following

    If we navigate to the browser, you should notice that the text looks a little different. Essentially we now can use all the amazing things bootstrap gives us

  3. Next we will be creating a header component using the angular cli. Within your terminal change directories to src/app/ and run the following command:

      ng generate component header

    Optionally run the following short hand command:

    ng g c header

    Now we have a header component! Lets go back to our browser and see it! If your confused or thinking that nothing changed, you are on the right track. The reason we cannot see it is that we have not added the header component to the root component of our application.

    The angular cli does a lot for us that we don't have to really think about. One is importing the header component to the main app module. You can see the header component being imported in the file /src/app/app.module.ts.

    So lets get our component to display! If we look at our src/app/header/header.component.ts we can see that we have a selector property called app-header. This is how we are able to reference the html file of the header html file. Putting the selector value with html tags is how we can view our component.

    Within src/app/app.component.html add the following tages above the current code:

    <app-header></app-header>

    If we go back to our browser, we can now see the "header works" text, which is the html that we have in our header html file.

  4. We really don't have much of a header. Navigate to the Bootstrap site so we can get a header that looks awesome. I changed a couple things with my header but you can use anything that you find on the site. Update your header html file so it looks like the following:

    Going back to our browser we should now see our header!

    As a challenge, create two more components, sidebar and content-list, using bootstrap. Do you best do make your web application look like the images used above. Next, we will get to add a form that will collect emails. This will allow us to build upon the other things we have learned so we can save these emails with a database!


Up Next:

As a challenge, create two more components, sidebar and content-list, using bootstrap. Do you best do make your web application look like the images used above. Next, we will get to add a form that will collect emails. This will allow us to build upon the other things we have learned so we can save these emails with a database!