Loading Events

« All Events

  • This event has passed.

zero 2 HERO Angular challenge – virtual

14 August 2018 @ 7:00 pm - 9:00 pm

Hi everyone,

As our community is over 200 members but we never able to get all participants out, I will be releasing a video everyday on how to get started with Angular. Most videos are under 8 minutes as the idea is to teach one small aspect of Angular. The first video is up on the Facebook Group so please join now and get started.

Facebook group:

Here is what the video goes through.

In this session we will look at the basic structure of a component.

To better explain a component, let’s create a custom component. We’ll call it “toolbar” We will later use it to keep the menu for our project.

Go to the terminal and type “ng generate component toolbar”

A new folder and 4 files will create in the src/app directory within our project
The “app.module.ts” file is also automatically updated to import the new component and make it known to our project.
What are the four files and how do we use them?
• toolbar.component.css
○ The “toolbar.component.css” file is used to hold all the styling that is specific to the component. This means the styling will be limited to this component. If we styled our h1 tag to be red in this file. The h1 tags in other components will not be affected
• toolbar.component.html
○ The “toolbar.component.html” file is the view of our component and will act just as a normal html file. It is made smarter as it understands the Angular template logic which really helps us create smarter applications very quickly
• toolbar.component.spec.ts
○ The “toolbar.component.spec.ts” file is used for testing. We will not be covering testing in our tutorial series. If you wish to find out more on this topic. Please let me know in the comments. If there is lots of interest, I will cover testing in a future series.
• toolbar.component.ts
○ The “toolbar.component.ts” file is used to create all the magic. This is a TypeScript file. If you unfimiliar with TypeScript, do not worry, I will explain what we are doing and why as we progress. It is recommended you at least understand Javascript in order to learn TypeScript.


Uxbridge Developers Facebook Group
999 High Street
Uxbridge, GB
+ Google Map