2 |
--------------------------------------------------------------------------------
/src/app/features/about/about-page/about-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AboutPageComponent } from './about-page.component';
4 |
5 | describe('AboutHomeComponent', () => {
6 | let component: AboutPageComponent;
7 | let fixture: ComponentFixture
3 |
4 |
5 |
6 |
29 |
30 |
31 |
32 | About
7 | 8 |9 | Built on top of Angular & Angular Material, angular-material-template provides a simple template that you can use for your next project. 13 |
14 | 15 |16 | Support the project by starring it on 18 | GitHub 19 | . 20 |
21 | 22 |
23 | Made with
2 |
3 |
--------------------------------------------------------------------------------
/src/app/features/account/account-page/account-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 |
4 | @Component({
5 | selector: 'app-account-page',
6 | templateUrl: './account-page.component.html',
7 | styleUrls: ['./account-page.component.css']
8 | })
9 | export class AccountPageComponent implements OnInit {
10 |
11 | constructor(private titleService: Title) { }
12 |
13 | ngOnInit() {
14 | this.titleService.setTitle('angular-material-template - Account');
15 | }
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/features/account/account-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LayoutComponent } from 'src/app/shared/layout/layout.component';
4 |
5 | import { AccountPageComponent } from './account-page/account-page.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: LayoutComponent,
11 | children: [
12 | { path: 'profile', component: AccountPageComponent },
13 | ]
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forChild(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class AccountRoutingModule { }
22 |
--------------------------------------------------------------------------------
/src/app/features/account/account.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { AccountRoutingModule } from './account-routing.module';
5 | import { AccountPageComponent } from './account-page/account-page.component';
6 | import { ChangePasswordComponent } from './change-password/change-password.component';
7 | import { ProfileDetailsComponent } from './profile-details/profile-details.component';
8 | import { SharedModule } from 'src/app/shared/shared.module';
9 |
10 | @NgModule({
11 | imports: [
12 | CommonModule,
13 | SharedModule,
14 | AccountRoutingModule
15 | ],
16 | declarations: [AccountPageComponent, ChangePasswordComponent, ProfileDetailsComponent],
17 | exports: [AccountPageComponent]
18 | })
19 | export class AccountModule { }
20 |
--------------------------------------------------------------------------------
/src/app/features/account/change-password/change-password.component.css:
--------------------------------------------------------------------------------
1 | .password-rules .mat-divider {
2 | position: unset !important;
3 | }
4 | .container{
5 | padding-top: 20px;
6 | }
--------------------------------------------------------------------------------
/src/app/features/account/change-password/change-password.component.html:
--------------------------------------------------------------------------------
1 |
50 |
51 |
--------------------------------------------------------------------------------
/src/app/features/account/change-password/change-password.component.ts:
--------------------------------------------------------------------------------
1 | import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
2 | import { Component, OnInit } from '@angular/core';
3 | import { NGXLogger } from 'ngx-logger';
4 | import { AuthenticationService } from 'src/app/core/services/auth.service';
5 | import { NotificationService } from 'src/app/core/services/notification.service';
6 | import { SpinnerService } from 'src/app/core/services/spinner.service';
7 |
8 |
9 | @Component({
10 | selector: 'app-change-password',
11 | templateUrl: './change-password.component.html',
12 | styleUrls: ['./change-password.component.css']
13 | })
14 | export class ChangePasswordComponent implements OnInit {
15 |
16 | form!: UntypedFormGroup;
17 | hideCurrentPassword: boolean;
18 | hideNewPassword: boolean;
19 | currentPassword!: string;
20 | newPassword!: string;
21 | newPasswordConfirm!: string;
22 | disableSubmit!: boolean;
23 |
24 | constructor(private authService: AuthenticationService,
25 | private logger: NGXLogger,
26 | private spinnerService: SpinnerService,
27 | private notificationService: NotificationService) {
28 |
29 | this.hideCurrentPassword = true;
30 | this.hideNewPassword = true;
31 | }
32 |
33 | ngOnInit() {
34 | this.form = new UntypedFormGroup({
35 | currentPassword: new UntypedFormControl('', Validators.required),
36 | newPassword: new UntypedFormControl('', Validators.required),
37 | newPasswordConfirm: new UntypedFormControl('', Validators.required),
38 | });
39 |
40 | this.form.get('currentPassword')?.valueChanges
41 | .subscribe(val => { this.currentPassword = val; });
42 |
43 | this.form.get('newPassword')?.valueChanges
44 | .subscribe(val => { this.newPassword = val; });
45 |
46 | this.form.get('newPasswordConfirm')?.valueChanges
47 | .subscribe(val => { this.newPasswordConfirm = val; });
48 |
49 | this.spinnerService.visibility.subscribe((value) => {
50 | this.disableSubmit = value;
51 | });
52 | }
53 |
54 | changePassword() {
55 |
56 | if (this.newPassword !== this.newPasswordConfirm) {
57 | this.notificationService.openSnackBar('New passwords do not match.');
58 | return;
59 | }
60 |
61 | const email = this.authService.getCurrentUser().email;
62 |
63 | this.authService.changePassword(email, this.currentPassword, this.newPassword)
64 | .subscribe(
65 | data => {
66 | this.logger.info(`User ${email} changed password.`);
67 | this.form.reset();
68 | this.notificationService.openSnackBar('Your password has been changed.');
69 | },
70 | error => {
71 | this.notificationService.openSnackBar(error.error);
72 | }
73 | );
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/features/account/profile-details/profile-details.component.css:
--------------------------------------------------------------------------------
1 | .profile-card {
2 | text-align: center;
3 | }
--------------------------------------------------------------------------------
/src/app/features/account/profile-details/profile-details.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
31 |
32 |
33 |
34 |
35 | My Profile
8 | 9 |
10 |
11 |
30 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
2 | 
3 |
4 |
--------------------------------------------------------------------------------
/src/app/features/account/profile-details/profile-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { AuthenticationService } from 'src/app/core/services/auth.service';
3 |
4 | @Component({
5 | selector: 'app-profile-details',
6 | templateUrl: './profile-details.component.html',
7 | styleUrls: ['./profile-details.component.css']
8 | })
9 | export class ProfileDetailsComponent implements OnInit {
10 |
11 | fullName: string = "";
12 | email: string = "";
13 | alias: string = "";
14 |
15 | constructor(private authService: AuthenticationService) { }
16 |
17 | ngOnInit() {
18 | this.fullName = this.authService.getCurrentUser().fullName;
19 | this.email = this.authService.getCurrentUser().email;
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/features/auth/auth-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { LoginComponent } from './login/login.component';
5 | import { PasswordResetRequestComponent } from './password-reset-request/password-reset-request.component';
6 | import { PasswordResetComponent } from './password-reset/password-reset.component';
7 |
8 | const routes: Routes = [
9 | { path: 'login', component: LoginComponent },
10 | { path: 'password-reset-request', component: PasswordResetRequestComponent },
11 | { path: 'password-reset', component: PasswordResetComponent }
12 | ];
13 |
14 | @NgModule({
15 | imports: [RouterModule.forChild(routes)],
16 | exports: [RouterModule]
17 | })
18 | export class AuthRoutingModule { }
19 |
--------------------------------------------------------------------------------
/src/app/features/auth/auth.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { AuthRoutingModule } from './auth-routing.module';
5 | import { LoginComponent } from './login/login.component';
6 | import { PasswordResetRequestComponent } from './password-reset-request/password-reset-request.component';
7 | import { PasswordResetComponent } from './password-reset/password-reset.component';
8 | import { SharedModule } from 'src/app/shared/shared.module';
9 |
10 | @NgModule({
11 | imports: [
12 | CommonModule,
13 | SharedModule,
14 | AuthRoutingModule
15 | ],
16 | declarations: [LoginComponent, PasswordResetRequestComponent, PasswordResetComponent]
17 | })
18 | export class AuthModule { }
19 |
--------------------------------------------------------------------------------
/src/app/features/auth/login/login.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umutesen/angular-material-template/8d54e5febbd7b19503aefa7b23067da3d39c1891/src/app/features/auth/login/login.component.css
--------------------------------------------------------------------------------
/src/app/features/auth/login/login.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 | 5 | {{fullName}} 6 |
7 | 8 | 11 | 12 | 15 |
2 |
47 |
--------------------------------------------------------------------------------
/src/app/features/auth/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { UntypedFormControl, Validators, UntypedFormGroup } from '@angular/forms';
4 | import { Title } from '@angular/platform-browser';
5 | import { AuthenticationService } from 'src/app/core/services/auth.service';
6 | import { NotificationService } from 'src/app/core/services/notification.service';
7 |
8 | @Component({
9 | selector: 'app-login',
10 | templateUrl: './login.component.html',
11 | styleUrls: ['./login.component.css']
12 | })
13 | export class LoginComponent implements OnInit {
14 |
15 | loginForm!: UntypedFormGroup;
16 | loading!: boolean;
17 |
18 | constructor(private router: Router,
19 | private titleService: Title,
20 | private notificationService: NotificationService,
21 | private authenticationService: AuthenticationService) {
22 | }
23 |
24 | ngOnInit() {
25 | this.titleService.setTitle('angular-material-template - Login');
26 | this.authenticationService.logout();
27 | this.createForm();
28 | }
29 |
30 | private createForm() {
31 | const savedUserEmail = localStorage.getItem('savedUserEmail');
32 |
33 | this.loginForm = new UntypedFormGroup({
34 | email: new UntypedFormControl(savedUserEmail, [Validators.required, Validators.email]),
35 | password: new UntypedFormControl('', Validators.required),
36 | rememberMe: new UntypedFormControl(savedUserEmail !== null)
37 | });
38 | }
39 |
40 | login() {
41 | const email = this.loginForm.get('email')?.value;
42 | const password = this.loginForm.get('password')?.value;
43 | const rememberMe = this.loginForm.get('rememberMe')?.value;
44 |
45 | this.loading = true;
46 | this.authenticationService
47 | .login(email.toLowerCase(), password)
48 | .subscribe(
49 | data => {
50 | if (rememberMe) {
51 | localStorage.setItem('savedUserEmail', email);
52 | } else {
53 | localStorage.removeItem('savedUserEmail');
54 | }
55 | this.router.navigate(['/']);
56 | },
57 | error => {
58 | this.notificationService.openSnackBar(error.error);
59 | this.loading = false;
60 | }
61 | );
62 | }
63 |
64 | resetPassword() {
65 | this.router.navigate(['/auth/password-reset-request']);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset-request/password-reset-request.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umutesen/angular-material-template/8d54e5febbd7b19503aefa7b23067da3d39c1891/src/app/features/auth/password-reset-request/password-reset-request.component.css
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset-request/password-reset-request.component.html:
--------------------------------------------------------------------------------
1 |
2 |
32 |
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset-request/password-reset-request.component.ts:
--------------------------------------------------------------------------------
1 | import { Router } from '@angular/router';
2 | import { Component, OnInit } from '@angular/core';
3 | import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
4 | import { Title } from '@angular/platform-browser';
5 |
6 | import { NotificationService } from 'src/app/core/services/notification.service';
7 | import { AuthenticationService } from 'src/app/core/services/auth.service';
8 |
9 | @Component({
10 | selector: 'app-password-reset-request',
11 | templateUrl: './password-reset-request.component.html',
12 | styleUrls: ['./password-reset-request.component.css']
13 | })
14 | export class PasswordResetRequestComponent implements OnInit {
15 |
16 | private email!: string;
17 | form!: UntypedFormGroup;
18 | loading!: boolean;
19 |
20 | constructor(private authService: AuthenticationService,
21 | private notificationService: NotificationService,
22 | private titleService: Title,
23 | private router: Router) { }
24 |
25 | ngOnInit() {
26 | this.titleService.setTitle('angular-material-template - Password Reset Request');
27 |
28 | this.form = new UntypedFormGroup({
29 | email: new UntypedFormControl('', [Validators.required, Validators.email])
30 | });
31 |
32 | this.form.get('email')?.valueChanges
33 | .subscribe((val: string) => { this.email = val.toLowerCase(); });
34 | }
35 |
36 | resetPassword() {
37 | this.loading = true;
38 | this.authService.passwordResetRequest(this.email)
39 | .subscribe(
40 | results => {
41 | this.router.navigate(['/auth/login']);
42 | this.notificationService.openSnackBar('Password verification mail has been sent to your email address.');
43 | },
44 | error => {
45 | this.loading = false;
46 | this.notificationService.openSnackBar(error.error);
47 | }
48 | );
49 | }
50 |
51 | cancel() {
52 | this.router.navigate(['/']);
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset/password-reset.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umutesen/angular-material-template/8d54e5febbd7b19503aefa7b23067da3d39c1891/src/app/features/auth/password-reset/password-reset.component.css
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset/password-reset.component.html:
--------------------------------------------------------------------------------
1 |
2 |
45 |
--------------------------------------------------------------------------------
/src/app/features/auth/password-reset/password-reset.component.ts:
--------------------------------------------------------------------------------
1 | import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
2 | import { ActivatedRoute, Router, ParamMap } from '@angular/router';
3 | import { Component, OnInit } from '@angular/core';
4 | import { Title } from '@angular/platform-browser';
5 | import { AuthenticationService } from 'src/app/core/services/auth.service';
6 | import { NotificationService } from 'src/app/core/services/notification.service';
7 |
8 | @Component({
9 | selector: 'app-password-reset',
10 | templateUrl: './password-reset.component.html',
11 | styleUrls: ['./password-reset.component.css']
12 | })
13 | export class PasswordResetComponent implements OnInit {
14 |
15 | private token!: string;
16 | email!: string;
17 | form!: UntypedFormGroup;
18 | loading!: boolean;
19 | hideNewPassword: boolean;
20 | hideNewPasswordConfirm: boolean;
21 |
22 | constructor(private activeRoute: ActivatedRoute,
23 | private router: Router,
24 | private authService: AuthenticationService,
25 | private notificationService: NotificationService,
26 | private titleService: Title) {
27 |
28 | this.titleService.setTitle('angular-material-template - Password Reset');
29 | this.hideNewPassword = true;
30 | this.hideNewPasswordConfirm = true;
31 | }
32 |
33 | ngOnInit() {
34 | this.activeRoute.queryParamMap.subscribe((params: ParamMap) => {
35 | this.token = params.get('token') + '';
36 | this.email = params.get('email') + '';
37 |
38 | if (!this.token || !this.email) {
39 | this.router.navigate(['/']);
40 | }
41 | });
42 |
43 | this.form = new UntypedFormGroup({
44 | newPassword: new UntypedFormControl('', Validators.required),
45 | newPasswordConfirm: new UntypedFormControl('', Validators.required)
46 | });
47 | }
48 |
49 | resetPassword() {
50 |
51 | const password = this.form.get('newPassword')?.value;
52 | const passwordConfirm = this.form.get('newPasswordConfirm')?.value;
53 |
54 | if (password !== passwordConfirm) {
55 | this.notificationService.openSnackBar('Passwords do not match');
56 | return;
57 | }
58 |
59 | this.loading = true;
60 |
61 | this.authService.passwordReset(this.email, this.token, password, passwordConfirm)
62 | .subscribe(
63 | () => {
64 | this.notificationService.openSnackBar('Your password has been changed.');
65 | this.router.navigate(['/auth/login']);
66 | },
67 | (error: any) => {
68 | this.notificationService.openSnackBar(error.error);
69 | this.loading = false;
70 | }
71 | );
72 | }
73 |
74 | cancel() {
75 | this.router.navigate(['/']);
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/features/customers/customer-list/customer-list.component.css:
--------------------------------------------------------------------------------
1 | table {
2 | width: 100%;
3 | }
4 |
5 | th.mat-sort-header-sorted {
6 | color: black;
7 | }
--------------------------------------------------------------------------------
/src/app/features/customers/customer-list/customer-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/features/customers/customer-list/customer-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { MatSort } from '@angular/material/sort';
3 | import { MatTableDataSource } from '@angular/material/table';
4 | import { NGXLogger } from 'ngx-logger';
5 | import { Title } from '@angular/platform-browser';
6 | import { NotificationService } from 'src/app/core/services/notification.service';
7 |
8 | export interface PeriodicElement {
9 | name: string;
10 | position: number;
11 | weight: number;
12 | symbol: string;
13 | }
14 |
15 | const ELEMENT_DATA: PeriodicElement[] = [
16 | { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
17 | { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
18 | { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
19 | { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
20 | { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
21 | { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
22 | { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
23 | { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
24 | { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
25 | { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
26 | ];
27 |
28 | @Component({
29 | selector: 'app-customer-list',
30 | templateUrl: './customer-list.component.html',
31 | styleUrls: ['./customer-list.component.css']
32 | })
33 | export class CustomerListComponent implements OnInit {
34 | displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
35 | dataSource = new MatTableDataSource(ELEMENT_DATA);
36 |
37 | @ViewChild(MatSort, { static: true })
38 | sort: MatSort = new MatSort;
39 |
40 | constructor(
41 | private logger: NGXLogger,
42 | private notificationService: NotificationService,
43 | private titleService: Title
44 | ) { }
45 |
46 | ngOnInit() {
47 | this.titleService.setTitle('angular-material-template - Customers');
48 | this.logger.log('Customers loaded');
49 | this.notificationService.openSnackBar('Customers loaded');
50 | this.dataSource.sort = this.sort;
51 |
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/features/customers/customers-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LayoutComponent } from 'src/app/shared/layout/layout.component';
4 |
5 | import { CustomerListComponent } from './customer-list/customer-list.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: LayoutComponent,
11 | children: [
12 | { path: '', component: CustomerListComponent },
13 | ]
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forChild(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class CustomersRoutingModule { }
22 |
--------------------------------------------------------------------------------
/src/app/features/customers/customers.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { CustomersRoutingModule } from './customers-routing.module';
4 | import { SharedModule } from 'src/app/shared/shared.module';
5 | import { CustomerListComponent } from './customer-list/customer-list.component';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | CustomersRoutingModule,
11 | SharedModule
12 | ],
13 | declarations: [
14 | CustomerListComponent
15 | ]
16 | })
17 | export class CustomersModule { }
18 |
--------------------------------------------------------------------------------
/src/app/features/dashboard/dashboard-home/dashboard-home.component.css:
--------------------------------------------------------------------------------
1 | .single-cards {
2 | margin: 20px 0;
3 | }
4 |
5 | .single-card .mat-card-avatar {
6 | width: 50px;
7 | height: 50px;
8 | }
9 |
10 | .single-card .mat-icon {
11 | font-size: 55px;
12 | }
13 |
14 | .projects-card>mat-card-content {
15 | max-height: 400px;
16 | overflow: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/features/dashboard/dashboard-home/dashboard-home.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
37 |
38 |
39 |
40 |
41 |
42 | Customers
7 | 8 || No. | 13 |{{element.position}} | 14 |Name | 19 |{{element.name}} | 20 |Weight | 25 |{{element.weight}} | 26 |Symbol | 31 |{{element.symbol}} | 32 |
|---|
2 |
3 |
--------------------------------------------------------------------------------
/src/app/features/dashboard/dashboard-home/dashboard-home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NotificationService } from 'src/app/core/services/notification.service';
3 | import { Title } from '@angular/platform-browser';
4 | import { NGXLogger } from 'ngx-logger';
5 | import { AuthenticationService } from 'src/app/core/services/auth.service';
6 |
7 | @Component({
8 | selector: 'app-dashboard-home',
9 | templateUrl: './dashboard-home.component.html',
10 | styleUrls: ['./dashboard-home.component.css']
11 | })
12 | export class DashboardHomeComponent implements OnInit {
13 | currentUser: any;
14 |
15 | constructor(private notificationService: NotificationService,
16 | private authService: AuthenticationService,
17 | private titleService: Title,
18 | private logger: NGXLogger) {
19 | }
20 |
21 | ngOnInit() {
22 | this.currentUser = this.authService.getCurrentUser();
23 | this.titleService.setTitle('angular-material-template - Dashboard');
24 | this.logger.log('Dashboard loaded');
25 |
26 | setTimeout(() => {
27 | this.notificationService.openSnackBar('Welcome!');
28 | });
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/features/dashboard/dashboard-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LayoutComponent } from 'src/app/shared/layout/layout.component';
4 |
5 | import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: LayoutComponent,
11 | children: [
12 | { path: '', component: DashboardHomeComponent },
13 | ]
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forChild(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class DashboardRoutingModule { }
22 |
--------------------------------------------------------------------------------
/src/app/features/dashboard/dashboard.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { DashboardRoutingModule } from './dashboard-routing.module';
5 | import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
6 | import { SharedModule } from 'src/app/shared/shared.module';
7 |
8 | @NgModule({
9 | declarations: [DashboardHomeComponent],
10 | imports: [
11 | CommonModule,
12 | DashboardRoutingModule,
13 | SharedModule
14 | ]
15 | })
16 | export class DashboardModule { }
17 |
--------------------------------------------------------------------------------
/src/app/features/icons/icons-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LayoutComponent } from 'src/app/shared/layout/layout.component';
4 | import { IconsComponent } from './icons/icons.component';
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: LayoutComponent,
10 | children: [
11 | { path: '', component: IconsComponent },
12 | ]
13 | }
14 | ];
15 |
16 | @NgModule({
17 | imports: [RouterModule.forChild(routes)],
18 | exports: [RouterModule]
19 | })
20 | export class IconsRoutingModule { }
21 |
--------------------------------------------------------------------------------
/src/app/features/icons/icons.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { IconsRoutingModule } from './icons-routing.module';
5 | import { IconsComponent } from './icons/icons.component';
6 | import { SharedModule } from 'src/app/shared/shared.module';
7 |
8 |
9 | @NgModule({
10 | declarations: [IconsComponent],
11 | imports: [
12 | CommonModule,
13 | SharedModule,
14 | IconsRoutingModule
15 | ]
16 | })
17 | export class IconsModule { }
18 |
--------------------------------------------------------------------------------
/src/app/features/icons/icons/icons.component.css:
--------------------------------------------------------------------------------
1 | iframe {
2 | width: 100%;
3 | height: 650px;
4 | }
--------------------------------------------------------------------------------
/src/app/features/icons/icons/icons.component.html:
--------------------------------------------------------------------------------
1 |
4 |
18 |
5 |
6 |
9 |
10 | Welcome back, {{currentUser.fullName}}!
7 | 8 |
11 |
16 |
17 |
12 | dashboard
13 |
15 | This is the dashboard.
14 |
2 |
--------------------------------------------------------------------------------
/src/app/features/icons/icons/icons.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { IconsComponent } from './icons.component';
4 |
5 | describe('IconsComponent', () => {
6 | let component: IconsComponent;
7 | let fixture: ComponentFixture
3 |
4 |
5 |
6 |
13 |
14 |
15 |
16 | Icons
7 | 8 | 11 | 12 |
2 |
--------------------------------------------------------------------------------
/src/app/features/typography/typography/typography.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TypographyComponent } from './typography.component';
4 |
5 | describe('TypographyComponent', () => {
6 | let component: TypographyComponent;
7 | let fixture: ComponentFixture
3 |
4 |
5 |
6 |
60 |
61 |
62 |
63 | Typography
7 | 8 | 9 | Header 1 10 |11 | The Life of Material Dashboard 12 |
13 | 14 | Header 2 15 |16 | The Life of Material Dashboard 17 |
18 | 19 | Header 3 20 |21 | The Life of Material Dashboard 22 |
23 | 24 | Header 4 25 |26 | The Life of Material Dashboard 27 |
28 | 29 | Header 5 30 |31 | The Life of Material Dashboard 32 |
33 | 34 | Header 6 35 |36 | The Life of Material Dashboard 37 |
38 | 39 | Paragraph 40 |41 | I will be the leader of a company that ends up being worth billions of dollars, because I got 42 | the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I 43 | have, to push possibilities, to show people, this is the level that things could be at. 44 |
45 | 46 | Quote 47 |48 |58 | 59 |49 | I will be the leader of a company that ends up being worth billions of dollars, because I 50 | got the answers. I understand culture. I am the nucleus. I think that’s a responsibility 51 | that I have, to push possibilities, to show people, this is the level that things could be 52 | at. 53 |
54 | 55 | Kanye West, Musician 56 | 57 |
2 |
--------------------------------------------------------------------------------
/src/app/features/users/user-list/user-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 |
4 | import { NGXLogger } from 'ngx-logger';
5 | import { NotificationService } from 'src/app/core/services/notification.service';
6 |
7 | @Component({
8 | selector: 'app-user-list',
9 | templateUrl: './user-list.component.html',
10 | styleUrls: ['./user-list.component.css']
11 | })
12 | export class UserListComponent implements OnInit {
13 |
14 | constructor(
15 | private logger: NGXLogger,
16 | private notificationService: NotificationService,
17 | private titleService: Title
18 | ) { }
19 |
20 | ngOnInit() {
21 | this.titleService.setTitle('angular-material-template - Users');
22 | this.logger.log('Users loaded');
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/features/users/users-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LayoutComponent } from 'src/app/shared/layout/layout.component';
4 |
5 | import { UserListComponent } from './user-list/user-list.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: LayoutComponent,
11 | children: [
12 | { path: '', component: UserListComponent },
13 | ]
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forChild(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class UsersRoutingModule { }
22 |
--------------------------------------------------------------------------------
/src/app/features/users/users.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { UsersRoutingModule } from './users-routing.module';
5 | import { UserListComponent } from './user-list/user-list.component';
6 | import { SharedModule } from 'src/app/shared/shared.module';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | SharedModule,
12 | UsersRoutingModule
13 | ],
14 | declarations: [UserListComponent]
15 | })
16 | export class UsersModule { }
17 |
--------------------------------------------------------------------------------
/src/app/shared/confirm-dialog/confirm-dialog.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umutesen/angular-material-template/8d54e5febbd7b19503aefa7b23067da3d39c1891/src/app/shared/confirm-dialog/confirm-dialog.component.css
--------------------------------------------------------------------------------
/src/app/shared/confirm-dialog/confirm-dialog.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
18 |
19 |
20 |
21 | Users
7 | 8 | 9 |
10 |
15 |
16 |
17 |
11 | people_outline
12 |
14 | No users exist.
13 |2 | {{title}} 3 |
4 | 5 |
6 |
8 |
9 | {{message}}
7 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/shared/confirm-dialog/confirm-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject } from '@angular/core';
2 | import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
3 |
4 | @Component({
5 | selector: 'app-confirm-dialog',
6 | templateUrl: './confirm-dialog.component.html',
7 | styleUrls: ['./confirm-dialog.component.css']
8 | })
9 | export class ConfirmDialogComponent {
10 | title: string;
11 | message: string;
12 |
13 | constructor(public dialogRef: MatDialogRef
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/app/shared/content-placeholder-animation/content-placeholder-animation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-content-placeholder-animation',
5 | templateUrl: './content-placeholder-animation.component.html',
6 | styleUrls: ['./content-placeholder-animation.component.css']
7 | })
8 | export class ContentPlaceholderAnimationComponent {
9 |
10 | constructor() { }
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/shared/layout/layout.component.css:
--------------------------------------------------------------------------------
1 | .navbar-spacer {
2 | flex: 1 1 auto;
3 | }
4 |
5 | .navbar {
6 | z-index: 2;
7 | }
8 |
9 | .navbar-brand {
10 | text-decoration: none;
11 | color: white;
12 | }
13 |
14 | .navbar-container {
15 | display: flex;
16 | flex-direction: column;
17 | position: absolute;
18 | top: 0;
19 | bottom: 0;
20 | left: 0;
21 | right: 0;
22 | }
23 |
24 | .navbar-is-mobile .navbar {
25 | position: fixed;
26 | /* Make sure the toolbar will stay on top of the content as it scrolls past. */
27 | z-index: 2;
28 | }
29 |
30 | .navbar-sidenav-container {
31 | /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
32 | causes `