Skip to content

Commit bbbb272

Browse files
jhadesjhades
committed
Angular Material Course
1 parent 9f77eaa commit bbbb272

8 files changed

+60
-28
lines changed

‎.angular-cli.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"test": "test.ts",
1818
"tsconfig": "tsconfig.app.json",
1919
"testTsconfig": "tsconfig.spec.json",
20-
"prefix": "app",
20+
"prefix": "",
2121
"styles": [
2222
"styles.css"
2323
],

‎src/app/app.component.html

+1-19
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,2 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{title}}!
5-
</h1>
6-
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
201

2+
<top-menu></top-menu>

‎src/app/app.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@angular/core';
2+
import 'hammerjs';
23

34
@Component({
45
selector: 'app-root',

‎src/app/app.module.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,21 @@ import {NgModule} from '@angular/core';
33

44
import {AppComponent} from './app.component';
55
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
6+
import {MatMenuModule} from '@angular/material/menu';
7+
import {MatIconModule} from '@angular/material/icon'
8+
9+
import { TopMenuComponent } from './top-menu/top-menu.component';
610

711
@NgModule({
812
declarations: [
9-
AppComponent
13+
AppComponent,
14+
TopMenuComponent
1015
],
1116
imports: [
1217
BrowserModule,
13-
BrowserAnimationsModule
18+
BrowserAnimationsModule,
19+
MatMenuModule,
20+
MatIconModule
1421
],
1522
providers: [],
1623
bootstrap: [AppComponent]

‎src/app/top-menu/top-menu.component.css

Whitespace-only changes.

‎src/app/top-menu/top-menu.component.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
<button mat-icon-button [matMenuTriggerFor]="menu">
3+
<mat-icon>more_vert</mat-icon>
4+
</button>
5+
6+
<mat-menu #menu="matMenu">
7+
<button mat-menu-item>
8+
<mat-icon>library_books</mat-icon>
9+
<span>Courses</span>
10+
</button>
11+
<button mat-menu-item disabled>
12+
<mat-icon>settings</mat-icon>
13+
<span>Settings</span>
14+
</button>
15+
<button mat-menu-item>
16+
<mat-icon>person_add</mat-icon>
17+
<span>Register</span>
18+
</button>
19+
20+
<button mat-menu-item>
21+
<mat-icon>account_circle</mat-icon>
22+
<span>Login</span>
23+
</button>
24+
</mat-menu>

‎src/app/top-menu/top-menu.component.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
2+
3+
@Component({
4+
selector: 'top-menu',
5+
templateUrl: './top-menu.component.html',
6+
styleUrls: ['./top-menu.component.css'],
7+
encapsulation: ViewEncapsulation.None
8+
})
9+
export class TopMenuComponent implements OnInit {
10+
11+
constructor() { }
12+
13+
ngOnInit() {
14+
}
15+
16+
}

‎src/index.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>AngularMaterialCourse</title>
6-
<base href="/">
4+
<meta charset="utf-8">
5+
<title>AngularMaterialCourse</title>
6+
<base href="/">
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
711

8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<link rel="icon" type="image/x-icon" href="favicon.ico">
1012
</head>
1113
<body>
12-
<app-root></app-root>
14+
<app-root></app-root>
1315
</body>
1416
</html>

0 commit comments

Comments
 (0)