Skip to content

A
angular-component-paths-exercise
Commit e5f38b8b authored by Shaphen's avatar Shaphen
Browse files
Options

Add account component with 2 forms

parent df095486
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 24 deletions
package-lock.json
View file @ e5f38b8b
...@@ -434,6 +434,141 @@ ...@@ -434,6 +434,141 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@angular/localize": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-11.2.10.tgz",
"integrity": "sha512-MjJ5aOumlXZoTTtB2gfy1Y6NZmGjqOUL5t5D3jXaSCl0rUdwDglB35zKYrqRyUYoGoXSdAuZzkLdREinzZz6eA==",
"dev": true,
"requires": {
"@babel/core": "7.8.3",
"glob": "7.1.2",
"yargs": "^16.2.0"
},
"dependencies": {
"@babel/core": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
"integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@babel/generator": "^7.8.3",
"@babel/helpers": "^7.8.3",
"@babel/parser": "^7.8.3",
"@babel/template": "^7.8.3",
"@babel/traverse": "^7.8.3",
"@babel/types": "^7.8.3",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
"json5": "^2.1.0",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
}
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dev": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dev": true,
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.7",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
"integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
"dev": true
}
}
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "11.2.10", "version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz",
...@@ -2206,6 +2341,14 @@ ...@@ -2206,6 +2341,14 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true "dev": true
}, },
"angular-responsive-carousel": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/angular-responsive-carousel/-/angular-responsive-carousel-2.0.2.tgz",
"integrity": "sha512-ade+YNVnZiq7q7Ljwhp5jk+p/+zT+k+iRC1V+rjbRB93L6qqvoDOjSl6y7TugzMyvk/QumWVsFnQGlB9O3IRsQ==",
"requires": {
"tslib": "^2.0.0"
}
},
"ansi-colors": { "ansi-colors": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
...@@ -7568,6 +7711,21 @@ ...@@ -7568,6 +7711,21 @@
"json5": "^2.1.2" "json5": "^2.1.2"
} }
}, },
"localize": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/localize/-/localize-0.4.7.tgz",
"integrity": "sha1-47aeWsHuR/4hH/B6Arjy6Wm/nPo=",
"requires": {
"commander": "~2.1.0"
},
"dependencies": {
"commander": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz",
"integrity": "sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E="
}
}
},
"locate-path": { "locate-path": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
......
package.json
View file @ e5f38b8b
...@@ -20,7 +20,9 @@ ...@@ -20,7 +20,9 @@
"@angular/platform-browser-dynamic": "~11.2.10", "@angular/platform-browser-dynamic": "~11.2.10",
"@angular/router": "~11.2.10", "@angular/router": "~11.2.10",
"@ng-bootstrap/ng-bootstrap": "^9.1.0", "@ng-bootstrap/ng-bootstrap": "^9.1.0",
"angular-responsive-carousel": "^2.0.2",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"localize": "^0.4.7",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "~0.11.3" "zone.js": "~0.11.3"
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
"@angular-devkit/build-angular": "~0.1102.9", "@angular-devkit/build-angular": "~0.1102.9",
"@angular/cli": "~11.2.9", "@angular/cli": "~11.2.9",
"@angular/compiler-cli": "~11.2.10", "@angular/compiler-cli": "~11.2.10",
"@angular/localize": "^11.2.10",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"codelyzer": "^6.0.0", "codelyzer": "^6.0.0",
......
src/app/account/account.component.css 0 → 100644
View file @ e5f38b8b
.invalid-text{
color:red;
}
.ng-invalid.ng-touched:not(form) {
border: 2px solid red;
}
\ No newline at end of file
src/app/account/account.component.html 0 → 100644
View file @ e5f38b8b
<div>
<div style="display:inline-block">
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div>
<p>reactive</p>
<div>
<input type="text" formControlName="firstName" class="form-control input" placeholder="First name">
</div>
<div>
<input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
</div>
</div>
<input type="email" formControlName="email" class="form-control input" placeholder="E-mail">
<div>
<button type="submit">Sign in</button>
</div>
</form>
<div >
<ngb-alert *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
<!-- <div class= "invalid-text" *ngIf="showMessage">
{{invalidEntry}}
</div> -->
</div>
</div>
<!-- template driven form -->
<div style="display:inline-block; margin-left: 10em;">
<form #newUserForm="ngForm" (ngSubmit)="onSubmit2(newUserForm)">
<div>
<p>template-driven</p>
<input type="text" class="input" placeholder="User name"
required
[(ngModel)]="userName" name="userName" pattern="[a-zA-Z ]*"
#pickedName="ngModel">
<div *ngIf="!pickedName.valid && pickedName.touched">
User name is required!
</div>
</div>
<div>
<input type="email" class="input" placeholder="Email"
required [(ngModel)]="email"
name="email" #userEmail="ngModel" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}">
<div *ngIf="!userEmail.valid && userEmail.touched">
Email is not valid!
</div>
</div>
<div>
<input type="password" class="input" placeholder="Password"
required
[(ngModel)]="password" name="password"
#userPassword="ngModel">
<div *ngIf="!userPassword.valid && userPassword.touched">
Password is required!
</div>
</div>
<button type="submit" [disabled]="!newUserForm.form.valid">
Register
</button>
<button type="button" (click)="newUserForm.reset()">
Reset
</button>
</form>
<!-- <pre>{{ newUserForm.form.value }}</pre> Value of whole form -->
<!-- <pre>User name: {{ pickedName.value }}</pre> Value of userName field -->
<pre>Valid form? {{ newUserForm.form.valid }}</pre>
</div>
</div>
src/app/account/account.component.spec.ts 0 → 100644
View file @ e5f38b8b
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AccountComponent } from './account.component';
describe('AccountComponent', () => {
let component: AccountComponent;
let fixture: ComponentFixture<AccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AccountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/account/account.component.ts 0 → 100644
View file @ e5f38b8b
import { Component, OnInit } from '@angular/core';
import { FormBuilder,Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
public userForm;
public showMessage: boolean = false;
public invalidEntry = 'Invalid entry';
// template driven form
userName = '';
email: string;
nickName: string;
password: string;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.userForm = this.formBuilder.group({
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
});
}
onSubmit(){
if(this.userForm.valid){
alert('User form is valid!!')
} else {
alert('User form is not valid!!')
}
}
onSubmit1(){
if(!this.userForm.valid){
this.showMessage = true;
}
}
//template driven
onSubmit2(form: NgForm) {
if (form.valid) {
console.log(form.value);
// ...our form is valid, we can submit the data
}
}
}
src/app/app-routing.module.ts
View file @ e5f38b8b
...@@ -4,17 +4,19 @@ import { EnglandComponent } from './england/england.component'; ...@@ -4,17 +4,19 @@ import { EnglandComponent } from './england/england.component';
import { FranceComponent } from './france/france.component'; import { FranceComponent } from './france/france.component';
import { GreeceComponent } from './greece/greece.component'; import { GreeceComponent } from './greece/greece.component';
import { SpainComponent } from './spain/spain.component'; import { SpainComponent } from './spain/spain.component';
import { AccountComponent } from './account/account.component';
const routes: Routes = [ const routes: Routes = [
{ path:'england', component: EnglandComponent }, { path:'england', component: EnglandComponent },
{ path:'france', component: FranceComponent }, { path:'france', component: FranceComponent },
{ path:'greece', component: GreeceComponent }, { path:'greece', component: GreeceComponent },
{ path:'spain', component: SpainComponent }, { path:'spain', component: SpainComponent },
// {path:'account', component: AccountComponent} {path:'account', component: AccountComponent}
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { }
export class AppRoutingModule { }
\ No newline at end of file
src/app/app.module.ts
View file @ e5f38b8b
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component'; import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component'; import { FooterComponent } from './footer/footer.component';
import { EnglandComponent } from './england/england.component'; import { EnglandComponent } from './england/england.component';
...@@ -10,21 +11,28 @@ import { FranceComponent } from './france/france.component'; ...@@ -10,21 +11,28 @@ import { FranceComponent } from './france/france.component';
import { GreeceComponent } from './greece/greece.component'; import { GreeceComponent } from './greece/greece.component';
import { SpainComponent } from './spain/spain.component'; import { SpainComponent } from './spain/spain.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { IvyCarouselModule } from 'angular-responsive-carousel';
import { AccountComponent } from './account/account.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
EnglandComponent, EnglandComponent,
FranceComponent, FranceComponent,
GreeceComponent, GreeceComponent,
SpainComponent SpainComponent,
AccountComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
NgbModule ReactiveFormsModule,
NgbModule,
IvyCarouselModule,
FormsModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
src/app/england/england.component.html
View file @ e5f38b8b
<div class="location-component-container"> <div class="location-component-container">
<h2>England</h2> <h2>England</h2>
<div class='imgContainer' >
<img class='img' src='assets/images/england/england-bridge.jpg' /> <div class='imgContainer' >
<img class='img' src='assets/images/england/england-parliament.jpg' /> <ngb-carousel>
<img class='img' src='assets/images/england/england-stonehedge.jpg' /> <ng-template ngbSlide>
</div> <img class='img' src='assets/images/england/england-bridge.jpg' />
</ng-template>
<ng-template ngbSlide>
<img class='img' src='assets/images/england/england-parliament.jpg' />
</ng-template>
<ng-template ngbSlide>
<img class='img' src='assets/images/england/england-stonehedge.jpg' />
</ng-template>
</ngb-carousel>
</div>
<p class="location-desc"> <p class="location-desc">
England is a country that is part of the United Kingdom. It shares land borders with Wales to its west and England is a country that is part of the United Kingdom. It shares land borders with Wales to its west and
......
src/app/england/england.component.ts
View file @ e5f38b8b
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
selector: 'app-england', selector: 'app-england',
...@@ -7,7 +8,13 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,7 +8,13 @@ import { Component, OnInit } from '@angular/core';
}) })
export class EnglandComponent implements OnInit { export class EnglandComponent implements OnInit {
constructor() { } constructor(config: NgbCarouselConfig) {
config.interval = 3000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = true;
config.animation
}
ngOnInit(): void { ngOnInit(): void {
} }
......
src/app/france/france.component.html
View file @ e5f38b8b
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<h2>France</h2> <h2>France</h2>
<div class='imgContainer' > <div class='imgContainer' >
<img class='img' src='assets/images/france/france-cafe.jpg' /> <img class='img' src='assets/images/france/france-cafe.jpg' />
<img class='img' src='assets/images/france/france-tower.jpg' /> <img class='img' src='assets/images/france/france-tower.jpg' />
<img class='img' src='assets/images/france/france-town.jpg' /> <img class='img' src='assets/images/france/france-town.jpg' />
</div> </div>
<p class="location-desc"> <p class="location-desc">
......
src/app/header/header.component.css
View file @ e5f38b8b
...@@ -11,9 +11,12 @@ h3{ ...@@ -11,9 +11,12 @@ h3{
text-align: center; text-align: center;
} }
.btn{ .location-button{
margin-top: 30px; margin: 0px 3px;
margin-left: 10px margin: 0px 3px;
text-decoration: none;
border: none;
border-radius: 3px;
} }
.btnMenu{ .btnMenu{
......
src/app/header/header.component.html
View file @ e5f38b8b
<div class='header'> <div class='header'>
<div class='btnMenu'> <div class='btnMenu'>
<button [routerLink]="['/england']">England</button> <button class="location-button" [routerLink]="['/england']">England</button>
<button [routerLink]="['/france']">France</button> <button class="location-button" [routerLink]="['/france']">France</button>
<button [routerLink]="['/greece']">Greece</button> <button class="location-button" [routerLink]="['/greece']">Greece</button>
<button [routerLink]="['/spain']">Spain</button> <button class="location-button" [routerLink]="['/spain']">Spain</button>
</div> </div>
<span class='account'> <span class='account'>
<i class="fa fa-user" [routerLink]="['/account']" ></i> <i class="fa fa-user" [routerLink]="['/account']" ></i>
......
src/polyfills.ts
View file @ e5f38b8b
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/** /**
* This file includes polyfills needed by Angular and is loaded before the app. * This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file. * You can add your own extra polyfills to this file.
......
src/styles.css
View file @ e5f38b8b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
width: 100%; width: 100%;
} }
.location-component-container{ .location-component-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -16,7 +16,27 @@ ...@@ -16,7 +16,27 @@
padding: 5px; padding: 5px;
} }
.location-desc{ .location-desc {
width: 80%; width: 80%;
margin-top: 20px; margin-top: 20px;
}
.carousel-cell {
height: auto;
width: 100%;
}
::ng-deep .carousel-item {
display: block !important;
position: absolute;
transform: translateY(100%);
opacity: 0;
transition:all 1s;
}
::ng-deep .carousel-item.active {
position: relative;
transform: translateY(0);
opacity: 1;
top: 0;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment