Angular + material design project
In my experience, codeSandbox is buggy for angular projects. Their template uses an old version of angular, which will not run with the new version of angular material.
Instead, I suggest you look at stackbliz.com: Here is a demo app: https://stackblitz.com/angular/vndaldqboxo
Github template
The example from the lecture can be found at https://github.com/cs-pan/angular-example. To run the example:git clone github.com/cs-pan/angular-example.git
cd angular-example/
npm install
ng serve
Angular cli
The easiest way to create an angular project it by using angular cli. It is installed at the student computers, but if you run on your own computer, you need to install it:
npm install -g @angular/cli
Create a project
Use the ng
tool to generate a new project. It will ask you if you want a router, and which styling to use (css/scss...). Make your choice and ng
will generate the project.
ng new my-angular-project
cd my-angular-project
ng serve
Angular have its own set of tools and the ng
command is the most used. You find more info about ng
at the official website. Here are some more things you can do with ng
.
Add an angular component to the project:
ng generate component my-stuff
The command will generate a component, including .html and .css template files, with tag app-my-stuff
. It will also add it to the current module. Now you can use <app-my-stuff></app-my-stuff>
in any template.
Add some style, Angular Material
Instructions from the official guide.
ng add @angular/material
Remember, angular material is divided into several modules, you need to import any angular material modules you use (in app.module.ts, add the modules to imports: [...])
If you want to use material icons, add the following to index.html
:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">