lu.se

Datavetenskap

Lunds Tekniska Högskola

Denna sida på svenska This page in English

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">

 

Sidansvarig: