Loading Events

« All Events

  • This event has passed.

zero 2 HERO Angular challenge – virtual

16 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:
https://www.facebook.com/groups/uxbridge.developers/

Here is what the video goes through.

Hey, in the last session we updated our component to actually look like a menu. This is great, but it does not actually serve a purpose… yet! And the reason is because we do not have any “pages” to switch between.

It has shown us how to create a component and now we can repeat these steps to create other components on our SPA – “single page application”.

Let us create a new component which will be the first page people see when they first land on the website.

Let’s create our new component called “home” HomeComponent.
Do you remember how to create it?

Yes, we go to our terminal and type “ng generate component home” followed by Enter

Next, we need to show our home component in the main part of the webpage.
To do that, cut the app.component.html text and paste it to home.component.html. Keep the <app-toolbar> tag in the app.component.html file.
Now, add a new tag to app.component.html, <app-home> tag.

We don’t see any difference in the browser. Encore!!! Applause!! Cheers!!! But wait, I now want a second page so I can switch between the home page the new page.

What will this page be used for?

Learning maths for primary school children.

Let’s create our new component called “maths” MathsComponent.
Do you remember how to create it?

Yes, we go to our terminal and type “ng generate component maths” followed by Enter

Next, we need to show our home component in the main part of the webpage.
Now, add a new tag to app.component.html, <app-maths> tag.

Venue

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