Skip to content

Installing and creating an angular project

Jump to bottom
Vincent Kruger edited this page Sep 22, 2022 · 3 revisions

Install and create a new project

Follow the latest installation steps

https://angular.io/guide/setup-local#install-the-angular-cli

Create a new project using the cli

See https://angular.io/guide/setup-local#create-a-workspace-and-initial-application

  • Open VS Code
  • Open your projects folder (where previous project folders are located)
  • Press Ctrl + ~ to open the terminal
    • Or use Ctrl + Shift + P and search for 'toggle terminal'
  • ng new my-angular-app
  • Select N when asked if you'd like to add routing
  • Select CSS when asked what stylesheet format you'd like to use.

The above ng new command will have created a new folder called my-angular-app with your angular project inside, open this folder with VS Code.

Start the project

  • Open the terminal
  • run npm start (ensure you've opened the my-angular-app folder)

This will start a live server of your app on port 4200 with some default content. image

Creating our first component

A component is a reusable piece of Html, JS and CSS that we can create and then use where we need it.
Each component's code lives in it's own folder, this keeps our code files small and more manageable versus having all of our HTML and Javascript in one or two big files.

Current Project Layout

  • The src folder holds all of the code for our actual site/app
  • The src/app folder represents a component called AppComponent.
    • This is the default component that was created for us automatically.
      • It has a few files already, but is generally just a container and starting point for us to add more functionality.
    • app.component.css here we can write any css, which will only be applied to the html inside app.component.html, not the entire site.
      • This means a css rule like p { background-color: red } won't affect the entire site, only the app component.
    • app.component.html here we can write the HTML for our component.
    • app.component.spec.ts here we can write tests for our component. Tests are something we won't use for now and can be ignored or even deleted.
    • app.component.ts here we can write TypeScript code to add interactivity to our component.
    • app.module.ts this is another Angular specific concept, which is used to group common functionality together.
      • For example, if we wanted to use functionality from other components inside our app.component, we'd need to import them in the app.module first.
      • For now, don't worry too much about the modules, we'll touch on them later.

Replace default content

  • Open the app.component.html file and delete all of it's content.
    • Replace it with something like <div>hello world</div> and you should see the live server change to show you just that div.
  • This will give us a blank starting point.

Generate a new component

  • Run ng generate component
  • Type in page-title as the name for the component when prompted
  • You'll see the following folder created app/page-title with the same file structure as described above.
  • Edit app.component.html and add <app-page-title></app-page-title> to it.
  • Take a look at the live server and you should see something like the following

image

Why and how

As mentioned in the steps above, the ng generate command generated a component for us. This means it created a folder with all the necessary files, as well as it updated the app.module.ts file automatically so that we can use our new custom component.

Why did we have to use <app-page-title> and not <page-title>?

This is an angular naming convention, and can be seen inside the angular.json file, as the prefix property. We can globally change or remove the prefix by editing angular.json, or if you look inside of page-title/page-title.component.ts you'll see the following.

@Component({
  selector: 'app-page-title', // tells Angular what custom tag we'd like to use in an HTML file to use our component. Removing `app` here would mean we could just use `<page-title>` as the tag.
  templateUrl: './page-title.component.html', // tells Angular where our HTML lives for this component
  styleUrls: ['./page-title.component.css'] // tells Angular where our CSS lives for this component
})
export class PageTitleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  // we will write our functions and custom logic here later

}

Making the title dynamic

Right now, our custom component will just always show page-title works! as that's what is currently written inside page-title.component.html.

But lets say we rather wanted to have the user define what the title should be, based on the page/place they use our custom component.

We can use Angular's content projection to achieve this.

Update page-title.component.html to the following

<h1><ng-content></ng-content></h1>

As mentioned on the above link, the ng-content tag is an angular feature which allows use to render/project whatever content was given to us inside our own custom component.

So try updating the app.component.html file to the following and look at your home page.

<app-page-title>Home Page</app-page-title>
<app-page-title>About Us</app-page-title>

You should see two separate headings on your page, corresponding to the text given to the component.

At this point, components might seem somewhat useful but also like a lot of extra work just to still render two h1 tags. Their power becomes more apparent once we add styling and interactivity though, which we will look at in the next chapter.
For now, try adding some css to page-title.component.css to style the h1 tag or even use a * (all) selector to style it.

Then try adding a regular h1 tag to the app's html file, and notice how that h1 tag is not getting styled! Our styling and interactivity is limited to our component only, which makes maintaining a big site a lot easier, as styles won't clash and conflict each other when we don't want them to.

image

Clone this wiki locally