Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c505a18

Browse files
Login
1 parent a7d2406 commit c505a18

File tree

8 files changed

+130
-61
lines changed

8 files changed

+130
-61
lines changed

‎Web/ng5/src/app/app.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!--The content below is only a placeholder and can be replaced.-->
2-
3-
<app-header></app-header>
2+
<router-outlet></router-outlet>
3+
<!-- <app-login></app-login>
4+
<app-header></app-header> -->
45
<!-- <app-sidenav></app-sidenav> -->

‎Web/ng5/src/app/app.module.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,29 @@ import { FormsModule } from '@angular/forms';
44
import { HttpModule } from '@angular/http';
55
import { MatToolbarModule } from '@angular/material/toolbar';
66
import { MatIconModule } from "@angular/material/icon";
7-
// import { Ng5Module } from './ng5.module';
8-
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
9-
import { MatMenuModule, MatButtonModule, MatCardModule, MatSidenavModule,MatListModule } from '@angular/material';
7+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
8+
import { MatMenuModule,MatInputModule, MatButtonModule, MatCardModule, MatSidenavModule,MatListModule } from '@angular/material';
109
import { HeroService } from './hero.service';
10+
import { Routes, RouterModule } from '@angular/router';
11+
import { MatFormFieldModule } from '@angular/material/form-field';
12+
import { ReactiveFormsModule } from '@angular/forms';
1113

1214
import { AppComponent } from './app.component';
1315
import { HeaderComponent } from './header/header.component';
1416
import { SidenavComponent } from './sidenav/sidenav.component';
17+
import { LoginComponent } from './login/login.component';
18+
19+
const appRoutes: Routes = [
20+
{ path: '', component:LoginComponent },
21+
{ path: 'header', component:HeaderComponent}
22+
];
1523

1624
@NgModule({
1725
declarations:[
1826
AppComponent,
1927
HeaderComponent,
20-
SidenavComponent
28+
SidenavComponent,
29+
LoginComponent
2130
],
2231
imports:[
2332
BrowserModule,
@@ -26,7 +35,12 @@ import { SidenavComponent } from './sidenav/sidenav.component';
2635
BrowserAnimationsModule,
2736
MatToolbarModule,
2837
MatIconModule,
29-
MatMenuModule,MatButtonModule,MatCardModule,MatSidenavModule,MatListModule
38+
MatInputModule,
39+
MatMenuModule,MatButtonModule,MatCardModule,MatSidenavModule,MatListModule,
40+
RouterModule.forRoot(appRoutes),
41+
MatFormFieldModule,
42+
ReactiveFormsModule,
43+
3044
],
3145
providers:[HeroService],
3246
bootstrap:[AppComponent]
Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +0,0 @@
1-
.example-container {
2-
width: 500px;
3-
height: 600px;
4-
/* border: 1px solid rgba(0, 0, 0, 0.5); */
5-
}
6-
7-
.example-sidenav-content {
8-
display: flex;
9-
height: 100%;
10-
align-items: center;
11-
justify-content: center;
12-
}
13-
14-
.example-sidenav {
15-
padding: 20px;
16-
}
Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
<mat-toolbar>
2-
<button type="button" mat-button (click)="snav.toggle()">
2+
<button type="button" mat-button (click)="side.toggle()">
33
<mat-icon>menu</mat-icon>
44
</button>
55
<mat-icon>home</mat-icon>
66
Mobile
77
</mat-toolbar>
8-
<mat-sidenav-container class="example-sidenav-container"
9-
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
10-
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
11-
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
12-
<mat-nav-list>
13-
<a mat-list-item >{{fillerNav}}</a>
14-
</mat-nav-list>
8+
<mat-sidenav-container class="example-sidenav-container">
9+
<mat-sidenav [fixedInViewport]="true" [fixedTopGap]="65" #side style="width:100px">
10+
<mat-list-item *ngFor="let item of fillerNav">
11+
{{item}}
12+
</mat-list-item>
1513
</mat-sidenav>
1614

17-
<mat-sidenav-content>
15+
<!-- <mat-sidenav-content>
1816
<p >{{fillerContent}}</p>
19-
</mat-sidenav-content>
20-
</mat-sidenav-container>
17+
</mat-sidenav-content> -->
18+
</mat-sidenav-container>
Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,32 @@
11
import { Component, Input, HostListener, ChangeDetectorRef } from "@angular/core";
22
import { SidenavComponent } from "../sidenav/sidenav.component";
3-
import { MediaMatcher } from "@angular/cdk/layout";
3+
import {MediaMatcher} from '@angular/cdk/layout';
4+
5+
46

57
@Component({
68
selector:'app-header',
79
templateUrl:'./header.component.html',
810
styleUrls:['./header.component.css']
911
})
1012
export class HeaderComponent{
11-
mobileQuery: MediaQueryList;
12-
fillerNav
13-
add(){
14-
let array = [];
15-
for (let index = 0; index < 5; index++) {
16-
array.push(index,'names');
17-
}
18-
console.log(array);
19-
this.fillerNav = array
20-
}
13+
//mobileQuery: MediaQueryList;
14+
fillerNav : any ;
15+
2116

22-
// fillerNav = Array(10).fill(0).map((_, i) => `Nav Item ${i + 1}`);
2317

2418
fillerContent =
25-
`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
26-
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
27-
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
28-
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
29-
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
30-
private _mobileQueryListener: () => void;
31-
32-
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
33-
this.mobileQuery = media.matchMedia('(max-width: 600px)');
34-
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
35-
this.mobileQuery.addListener(this._mobileQueryListener);
36-
console.log(media);
37-
}
19+
``;
3820

39-
ngOnDestroy(): void {
40-
this.mobileQuery.removeListener(this._mobileQueryListener);
21+
constructor(){
22+
let array = [];
23+
for (let index = 0; index < 5; index++) {
24+
array.push(index);
4125
}
26+
this.fillerNav = array
27+
console.log(this.fillerNav);
28+
}
29+
// ngOnDestroy(): void {
30+
// this.mobileQuery.removeListener(this._mobileQueryListener);
31+
// }
4232
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="loginbox">
2+
<mat-card class="example-card">
3+
<mat-card-header>
4+
5+
<mat-card-title style="font-weight: bolder;font-size: 20px">Login</mat-card-title>
6+
</mat-card-header>
7+
<mat-card-content>
8+
9+
<mat-form-field>
10+
<input placeholder="Enter your email" matInput [formControl]="email" required>
11+
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
12+
</mat-form-field>
13+
14+
<mat-form-field>
15+
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
16+
<!-- <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon> -->
17+
</mat-form-field>
18+
19+
20+
</mat-card-content>
21+
<mat-card-actions >
22+
<button mat-raised-button ><a [routerLink]="['/header']">Login</a></button>
23+
<button mat-raised-button >Register</button>
24+
</mat-card-actions>
25+
</mat-card>
26+
</div>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.example-card {
2+
display: flex;
3+
flex-direction: column;
4+
padding-left: 60px;
5+
padding: 80px;
6+
}
7+
8+
.loginbox{
9+
margin: 0;
10+
padding: 0;
11+
width: 400px;
12+
height: 480px;
13+
//background: #E8E8E8;
14+
color: #383838;
15+
top:50%;
16+
left:50%;
17+
position: absolute;
18+
transform: translate(-50%,-50%);
19+
box-sizing: border-box;
20+
padding: 30px;
21+
border-color: #E8E8E8;
22+
}
23+
24+
.example-container {
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
29+
mat-form-field{
30+
padding: 6px;
31+
}
32+
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { FormControl, Validators } from '@angular/forms';
3+
4+
@Component({
5+
selector: 'app-login',
6+
templateUrl: './login.component.html',
7+
styleUrls: ['./login.component.scss']
8+
})
9+
export class LoginComponent implements OnInit {
10+
11+
constructor() { }
12+
13+
ngOnInit() {
14+
}
15+
//hide = true;
16+
email = new FormControl('', [Validators.required, Validators.email]);
17+
18+
getErrorMessage() {
19+
return this.email.hasError('required') ? 'You must enter a value' :
20+
this.email.hasError('email') ? 'Not a valid email' :
21+
'';
22+
}
23+
24+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /