Cascading or Dependent Dropdown using Angular
3 | 4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
26 |
27 | Angular Check/Uncheck Individual/All Checkbox on HTML Table Rows
2 | 3 |
4 |
5 |
6 |
24 |
25 | | 8 | | ID | 9 |Code | 10 |Name | 11 |Price | 12 |
|---|---|---|---|---|
| 17 | | {{ p.id }} | 18 |{{ p.name }} | 19 |{{ p.code }} | 20 |{{ p.price }} | 21 |
2 |
28 |
29 |
2 |
6 | 3 | Welcome to {{ title }} 4 |
5 |Click Below Link To Get Employee Data From Server
7 |
8 |
9 | Using Link
12 |
13 |
16 |
--------------------------------------------------------------------------------
/angular-file-download/version-13/angular-file-download/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { FileService } from './file.service';
4 | import { saveAs } from 'file-saver';
5 |
6 | @Component({
7 | selector: 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css']
10 | })
11 | export class AppComponent {
12 |
13 | title = 'Angular File Download From Server';
14 |
15 | constructor(private fileService: FileService) {}
16 |
17 | download() {
18 | this.fileService.downloadFile().subscribe((response: any) => {
19 | let blob:any = new Blob([response], { type: 'text/json; charset=utf-8' });
20 | const url = window.URL.createObjectURL(blob);
21 | //window.open(url);
22 | saveAs(blob, 'employees.json');
23 | }), (error: any) => console.log('Error downloading the file'),
24 | () => console.info('File downloaded successfully');
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/angular-file-download/version-13/angular-file-download/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | import { HttpClientModule } from '@angular/common/http';
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | AppRoutingModule,
16 | HttpClientModule
17 | ],
18 | providers: [],
19 | bootstrap: [AppComponent]
20 | })
21 | export class AppModule { }
22 |
--------------------------------------------------------------------------------
/angular-file-download/version-13/angular-file-download/src/app/file.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { FileService } from './file.service';
4 |
5 | describe('FileService', () => {
6 | let service: FileService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(FileService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/angular-file-download/version-13/angular-file-download/src/app/file.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {HttpClient, HttpResponse} from '@angular/common/http';
3 | import {Observable} from 'rxjs';
4 |
5 | @Injectable({ providedIn: 'root' })
6 | export class FileService {
7 |
8 | constructor(private http: HttpClient) {}
9 |
10 | downloadFile(): any {
11 | return this.http.get('http://localhost:8080/employees/download', {responseType: 'blob'});
12 | }
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/angular-file-download/version-13/angular-file-download/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 | Using Link
10 | Download Employee File Data
11 |
12 |
13 | Using Button
14 | 15 |
2 |
6 | 3 | Welcome to {{ title }} 4 |
5 |Click Below Link To Get Employee Data From Server
7 |
8 |
9 | Using Link
12 |
13 |
16 |
--------------------------------------------------------------------------------
/angular-file-download/version-15/angular-file-download/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { FileService } from './file.service';
4 | import { saveAs } from 'file-saver';
5 |
6 | @Component({
7 | selector: 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css']
10 | })
11 | export class AppComponent {
12 |
13 | title = 'Angular File Download From Server';
14 |
15 | constructor(private fileService: FileService) {}
16 |
17 | download() {
18 | this.fileService.downloadFile().subscribe((response: any) => {
19 | let blob:any = new Blob([response], { type: 'text/json; charset=utf-8' });
20 | const url = window.URL.createObjectURL(blob);
21 | //window.open(url);
22 | saveAs(blob, 'employees.json');
23 | }), (error: any) => console.log('Error downloading the file'),
24 | () => console.info('File downloaded successfully');
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/angular-file-download/version-15/angular-file-download/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | import { HttpClientModule } from '@angular/common/http';
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | AppRoutingModule,
16 | HttpClientModule
17 | ],
18 | providers: [],
19 | bootstrap: [AppComponent]
20 | })
21 | export class AppModule { }
22 |
--------------------------------------------------------------------------------
/angular-file-download/version-15/angular-file-download/src/app/file.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {HttpClient, HttpResponse} from '@angular/common/http';
3 | import {Observable} from 'rxjs';
4 |
5 | @Injectable({ providedIn: 'root' })
6 | export class FileService {
7 |
8 | constructor(private http: HttpClient) {}
9 |
10 | downloadFile(): any {
11 | return this.http.get('http://localhost:8080/employees/download', {responseType: 'blob'});
12 | }
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/angular-file-download/version-15/angular-file-download/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 | Using Link
10 | Download Employee File Data
11 |
12 |
13 | Using Button
14 | 15 |
2 |
6 | 3 | Welcome to {{ title }} 4 |
5 |Click below link to get employee data
7 |
8 |
9 | Using Link
12 |
13 |
--------------------------------------------------------------------------------
/angular-file-download/version-upto-12/angular-file-download/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | //import { HttpModule } from '@angular/http'; //Angular 7/8
4 | import { HttpClientModule } from '@angular/common/http'; //Angular 11
5 | import { AppRoutingModule } from './app-routing.module';
6 | import { AppComponent } from './app.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | imports: [
13 | BrowserModule,
14 | AppRoutingModule,
15 | //HttpModule //Angular 7/8
16 | HttpClientModule //Angular 11
17 | ],
18 | providers: [],
19 | bootstrap: [AppComponent]
20 | })
21 | export class AppModule { }
--------------------------------------------------------------------------------
/angular-file-download/version-upto-12/angular-file-download/app/file.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | //import {Http, ResponseContentType} from '@angular/http';
3 | import {HttpClient, HttpResponse} from '@angular/common/http';
4 | import {Observable} from 'rxjs';
5 |
6 | @Injectable({ providedIn: 'root' })
7 | export class FileService {
8 |
9 | constructor(private http: HttpClient) {}
10 |
11 | //downloadFile(): Observable
9 | Using Link
10 | Download Employee Data
11 |
12 |
13 | Using Button
14 | 15 |
2 |
--------------------------------------------------------------------------------
/angular-flask-rest-mongodb/src/app/user-add/user-add.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserAddComponent } from './user-add.component';
4 |
5 | describe('UserAddComponent', () => {
6 | let component: UserAddComponent;
7 | let fixture: ComponentFixtureAdd User Detail
3 |
4 |
20 |
21 |
22 |
23 | 5 | 8 |
9 |10 | 13 |
14 |15 | 18 |
19 |
2 |
--------------------------------------------------------------------------------
/angular-flask-rest-mongodb/src/app/user-detail/user-detail.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserDetailComponent } from './user-detail.component';
4 |
5 | describe('UserDetailComponent', () => {
6 | let component: UserDetailComponent;
7 | let fixture: ComponentFixture{{user.name | uppercase}} Details
3 |
4 |
11 |
12 | 5 | Name: {{user.name}} 6 |
7 |8 | Email: {{user.email}} 9 |
10 |
2 |
--------------------------------------------------------------------------------
/angular-flask-rest-mongodb/src/app/user-edit/user-edit.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserEditComponent } from './user-edit.component';
4 |
5 | describe('UserEditComponent', () => {
6 | let component: UserEditComponent;
7 | let fixture: ComponentFixture{{user.name | uppercase}} Details
3 |
4 |
11 |
12 |
13 |
14 | 5 | Name: 6 |
7 |8 | Email: 9 |
10 |Users
2 |
3 |
4 | Add New User
5 |
6 |
7 | | Name | 10 |Actions | 12 ||
|---|---|---|
| {{user.name}} | 15 |{{user.email}} | 16 |17 | Detail 18 | 19 | Edit 20 | 21 | 22 | | 23 |
2 |
24 |
--------------------------------------------------------------------------------
/angular-flask/src/app/user-add/user-add.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { Location } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { User } from '../user';
6 | import { UserService } from '../user.service';
7 |
8 | @Component({
9 | selector: 'app-user-add',
10 | standalone: true,
11 | imports: [FormsModule],
12 | templateUrl: './user-add.component.html',
13 | styleUrl: './user-add.component.css'
14 | })
15 | export class UserAddComponent implements OnInit {
16 |
17 | @Input() user: User = { name: '', email: '', pwd:'' };
18 |
19 | constructor(private userService: UserService, private location: Location) { }
20 |
21 | ngOnInit() {
22 | }
23 |
24 | save(): void {
25 | this.userService.addUser(this.user).subscribe(() => this.goBack());
26 | }
27 |
28 | goBack(): void {
29 | this.location.back();
30 | }
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/angular-flask/src/app/user-detail/user-detail.component.html:
--------------------------------------------------------------------------------
1 | Add User Detail
3 |
4 |
20 |
21 |
22 |
23 | 5 | 8 |
9 |10 | 13 |
14 |15 | 18 |
19 |
2 |
14 |
--------------------------------------------------------------------------------
/angular-flask/src/app/user-detail/user-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { Location, CommonModule } from '@angular/common';
4 | import { ActivatedRoute } from '@angular/router';
5 |
6 | import { User } from '../user';
7 | import { UserService } from '../user.service';
8 |
9 | @Component({
10 | selector: 'app-user-detail',
11 | standalone: true,
12 | imports: [CommonModule],
13 | templateUrl: './user-detail.component.html',
14 | styleUrl: './user-detail.component.css'
15 | })
16 | export class UserDetailComponent implements OnInit {
17 |
18 | user?: User;
19 |
20 | constructor(private route: ActivatedRoute, private userService: UserService, private location: Location) { }
21 |
22 | ngOnInit() {
23 | this.getUser();
24 | }
25 |
26 | getUser(): void {
27 | const id = + Number(this.route.snapshot.paramMap.get('id'));
28 | this.userService.getUser(id).subscribe(user => this.user = user);
29 | }
30 |
31 | goBack(): void {
32 | this.location.back();
33 | }
34 |
35 | }
36 |
--------------------------------------------------------------------------------
/angular-flask/src/app/user-edit/user-edit.component.html:
--------------------------------------------------------------------------------
1 | {{user!.name | uppercase}} Details
3 |Id: {{user!.id}}
4 |
5 |
12 |
13 | 6 | Name: {{user!.name}} 7 |
8 |9 | Email: {{user!.email}} 10 |
11 |
2 |
16 |
--------------------------------------------------------------------------------
/angular-flask/src/app/user-list/user-list.component.html:
--------------------------------------------------------------------------------
1 | {{user.name | uppercase}} Details
3 |Id: {{user.id}}
4 |
5 |
12 |
13 |
14 |
15 | 6 | Name: 7 |
8 |9 | Email: 10 |
11 |Users
2 |
3 |
4 | Add New User
5 |
6 |
7 | 8 |
| ID | 11 |Name | 12 |Actions | 14 ||
|---|---|---|---|
| {{user.id}} | 17 |{{user.name}} | 18 |{{user.email}} | 19 |20 | Detail 21 | 22 | Edit 23 | 24 | 25 | | 26 |
Display Data on HTML Table from Server using Angular and Alternate Row Color
2 | 3 |
4 |
5 |
6 |
22 |
23 | | ID | 8 |Code | 9 |Name | 10 |Price | 11 |
|---|---|---|---|
| {{ p.id }} | 16 |{{ p.name }} | 17 |{{ p.code }} | 18 |{{ p.price }} | 19 |
Display Data on HTML Table from Server using Angular and Alternate Row Color
2 | 3 |
4 |
5 |
6 |
22 |
23 | | ID | 8 |Code | 9 |Name | 10 |Price | 11 |
|---|---|---|---|
| {{ p.id }} | 16 |{{ p.name }} | 17 |{{ p.code }} | 18 |{{ p.price }} | 19 |
2 |
3 | ![]()
4 |
--------------------------------------------------------------------------------
/angular-image-upload-display/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 |
10 | //url; //Angular 8
11 | url: any; //Angular 11, for stricter type
12 | msg = "";
13 |
14 | //selectFile(event) { //Angular 8
15 | selectFile(event: any) { //Angular 11, for stricter type
16 | if(!event.target.files[0] || event.target.files[0].length == 0) {
17 | this.msg = 'You must select an image';
18 | return;
19 | }
20 |
21 | var mimeType = event.target.files[0].type;
22 |
23 | if (mimeType.match(/image\/*/) == null) {
24 | this.msg = "Only images are supported";
25 | return;
26 | }
27 |
28 | var reader = new FileReader();
29 | reader.readAsDataURL(event.target.files[0]);
30 |
31 | reader.onload = (_event) => {
32 | this.msg = "";
33 | this.url = reader.result;
34 | }
35 | }
36 |
37 | }
38 |
--------------------------------------------------------------------------------
/angular-image-upload-display/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | imports: [
12 | BrowserModule,
13 | AppRoutingModule
14 | ],
15 | providers: [],
16 | bootstrap: [AppComponent]
17 | })
18 | export class AppModule { }
19 |
--------------------------------------------------------------------------------
/angular-image-upload-display/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 5 | 6 |
7 |
4 |
--------------------------------------------------------------------------------
/angular-load-local-json/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { FileService } from './file.service';
4 |
5 | @Component({
6 | selector: 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.css']
9 | })
10 | export class AppComponent implements OnInit {
11 |
12 | results: any[] = [];
13 |
14 | constructor(private fileService: FileService) { }
15 |
16 | ngOnInit() {
17 | this.fileService.getResultList().subscribe(sr => {Object.assign(this.results, sr);});
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/angular-load-local-json/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | import { HttpClientModule } from '@angular/common/http';
8 | import { FileService } from './file.service';
9 |
10 | @NgModule({
11 | declarations: [
12 | AppComponent
13 | ],
14 | imports: [
15 | BrowserModule,
16 | AppRoutingModule,
17 | HttpClientModule
18 | ],
19 | providers: [FileService],
20 | bootstrap: [AppComponent]
21 | })
22 | export class AppModule { }
23 |
--------------------------------------------------------------------------------
/angular-load-local-json/src/app/file.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { FileService } from './file.service';
4 |
5 | describe('FileService', () => {
6 | let service: FileService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(FileService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/angular-load-local-json/src/app/file.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class FileService {
8 |
9 | constructor(private http: HttpClient) { }
10 |
11 | getResultList() {
12 | const currentLocation = window.location.origin;
13 | const headers = new HttpHeaders({ 'Content-Type': 'application/json' })
14 |
15 | //return this.http.get('./assets/data/results.json', { headers });
16 |
17 | return this.http.get(currentLocation + '/assets/data/results.json', { headers });
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/readme.rst:
--------------------------------------------------------------------------------
1 | Please follow the tutorial https://roytuts.com/how-to-setup-multiple-environments-for-angular-applications/
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [];
5 |
6 | @NgModule({
7 | imports: [RouterModule.forRoot(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class AppRoutingModule { }
11 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-multiple-environments-setup/src/app/app.component.css
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | title = 'angular-multiple-environments-setup';
10 | }
11 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | imports: [
12 | BrowserModule,
13 | AppRoutingModule
14 | ],
15 | providers: [],
16 | bootstrap: [AppComponent]
17 | })
18 | export class AppModule { }
19 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | clientId: '8fa5816uj4nKywSD10h8',
4 | loginUrl: 'https://okta.com/oauth2/v1/authorize',
5 | tokenUrl: 'https://okta.com/oauth2/v1/token',
6 | callbackUrl: 'https://prodenv.com/'
7 | };
8 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/environments/environment.sit.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | clientId: '4oa1216uj8nFywHG10h8',
4 | loginUrl: 'https://okta.com/oauth2/v1/authorize',
5 | tokenUrl: 'https://okta.com/oauth2/v1/token',
6 | callbackUrl: 'https://sitenv.com/',
7 | };
8 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | clientId: '0oa3216uj9nKywGF10h4',
8 | loginUrl: 'https://okta.com/oauth2/v1/authorize',
9 | tokenUrl: 'https://okta.com/oauth2/v1/token',
10 | callbackUrl: 'http://localhost:4200/'
11 | };
12 |
13 | /*
14 | * For easier debugging in development mode, you can import the following file
15 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
16 | *
17 | * This import should be commented out in production mode because it will have a negative impact
18 | * on performance if an error is thrown.
19 | */
20 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
21 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/environments/environment.uat.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | clientId: '2oa3216uj8nKywGF10h6',
4 | loginUrl: 'https://okta.com/oauth2/v1/authorize',
5 | tokenUrl: 'https://okta.com/oauth2/v1/token',
6 | callbackUrl: 'https://uatenv.com/',
7 | };
8 |
--------------------------------------------------------------------------------
/angular-multiple-environments-setup/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{i+1}}. {{r}}
5 |dashboard works!
2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/dashboard/dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | describe('DashboardComponent', () => { 6 | let component: DashboardComponent; 7 | let fixture: ComponentFixtureSession Expired!
` 6 | }) 7 | export class ExpiredComponent { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-okta-sso-role-based-access/src/app/login/login.component.css -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/login/login.component.html: -------------------------------------------------------------------------------- 1 |login works!
2 |Redirecting... Please wait!
-------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixtureprotected works!
2 |Role Based Access
3 | -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/protected/protected.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProtectedComponent } from './protected.component'; 4 | 5 | describe('ProtectedComponent', () => { 6 | let component: ProtectedComponent; 7 | let fixture: ComponentFixtureYou are unauthorized!
` 6 | }) 7 | export class UnauthorizedComponent { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/updatepage/updatepage.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-okta-sso-role-based-access/src/app/updatepage/updatepage.component.css -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/updatepage/updatepage.component.html: -------------------------------------------------------------------------------- 1 |updatepage works!
2 |Role Based Access
3 | -------------------------------------------------------------------------------- /angular-okta-sso-role-based-access/src/app/updatepage/updatepage.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UpdatepageComponent } from './updatepage.component'; 4 | 5 | describe('UpdatepageComponent', () => { 6 | let component: UpdatepageComponent; 7 | let fixture: ComponentFixtureauth works!
2 | -------------------------------------------------------------------------------- /angular-okta-sso/src/app/auth/auth.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AuthComponent } from './auth.component'; 4 | 5 | describe('AuthComponent', () => { 6 | let component: AuthComponent; 7 | let fixture: ComponentFixtureThis is a '{{childMessage}}' in Child component
2 | 3 | 6 | -------------------------------------------------------------------------------- /angular-parent-child-data-share/src/app/child/child.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | //import { Component, Output, EventEmitter } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-child', 6 | templateUrl: './child.component.html', 7 | styleUrl: './child.component.css' 8 | }) 9 | export class ChildComponent { 10 | 11 | @Input() childMessage: string = ''; 12 | 13 | /*@Output() newItemEvent = new EventEmitter
2 |
6 |
--------------------------------------------------------------------------------
/angular-photo-gallery/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Lightbox } from 'ngx-lightbox';
4 |
5 | @Component({
6 | selector: 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.css']
9 | })
10 | export class AppComponent {
11 |
12 | _albums: any = [];
13 |
14 | constructor(private _lightbox: Lightbox) {
15 | for (let i = 1; i <= 12; i++) {
16 | const src = './assets/images/image' + i + '.jpg';
17 | const caption = 'Image ' + i + ' caption';
18 | const thumb = './assets/images/thumbs/image' + i + '.jpg';
19 | const album = {
20 | src: src,
21 | caption: caption,
22 | thumb: thumb
23 | };
24 |
25 | this._albums.push(album);
26 | }
27 | }
28 |
29 | open(index: number): void {
30 | // open lightbox
31 | this._lightbox.open(this._albums, index);
32 | }
33 |
34 | close(): void {
35 | // close lightbox programmatically
36 | this._lightbox.close();
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/angular-photo-gallery/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | import { LightboxModule } from 'ngx-lightbox';
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | AppRoutingModule,
16 | LightboxModule
17 | ],
18 | providers: [],
19 | bootstrap: [AppComponent]
20 | })
21 | export class AppModule { }
22 |
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image1.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image10.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image11.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image12.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image2.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image3.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image4.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image5.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image6.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image7.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image8.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/image9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/image9.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image1.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image10.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image11.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image12.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image2.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image3.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image4.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image5.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image6.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image7.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image8.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/assets/images/thumbs/image9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytuts/angular/d004e0f93f36dc72e8566a0d5ed9d7f9a8820885/angular-photo-gallery/src/assets/images/thumbs/image9.jpg
--------------------------------------------------------------------------------
/angular-photo-gallery/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 | 
4 |
5 |
2 |
3 |
4 |
5 |
6 |
7 |
2 |
--------------------------------------------------------------------------------
/angular-reactive/src/app/website-add/website-add.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteAddComponent } from './website-add.component';
4 |
5 | describe('WebsiteAddComponent', () => {
6 | let component: WebsiteAddComponent;
7 | let fixture: ComponentFixtureAdd Website Detail
3 |
4 |
15 |
16 |
17 |
18 | 5 | 8 |
9 |10 | 13 |
14 |
2 |
--------------------------------------------------------------------------------
/angular-reactive/src/app/website-detail/website-detail.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteDetailComponent } from './website-detail.component';
4 |
5 | describe('WebsiteDetailComponent', () => {
6 | let component: WebsiteDetailComponent;
7 | let fixture: ComponentFixture{{website.title | uppercase}} Details
3 |Id: {{website.id}}
4 |
5 |
12 |
13 | 6 | Title: {{website.title}} 7 |
8 |9 | URL: {{website.url}} 10 |
11 |
2 |
--------------------------------------------------------------------------------
/angular-reactive/src/app/website-edit/website-edit.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteEditComponent } from './website-edit.component';
4 |
5 | describe('WebsiteEditComponent', () => {
6 | let component: WebsiteEditComponent;
7 | let fixture: ComponentFixture{{website.title | uppercase}} Details
3 |Id: {{website.id}}
4 |
5 |
12 |
13 |
14 |
15 | 6 | Title: 7 |
8 |9 | URL: 10 |
11 |Websites
2 |
3 |
4 | Add New Wbsite
5 |
6 |
7 | | ID | 10 |Title | 11 |URL | 12 |Actions | 13 |
|---|---|---|---|
| {{website.id}} | 16 |{{website.title}} | 17 |{{website.url}} | 18 |19 | Detail 20 | 21 | Edit 22 | 23 | 24 | | 25 |
2 |
15 |
--------------------------------------------------------------------------------
/angular-spring-boot-crud-app/src/app/website-add/website-add.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteAddComponent } from './website-add.component';
4 |
5 | describe('WebsiteAddComponent', () => {
6 | let component: WebsiteAddComponent;
7 | let fixture: ComponentFixtureAdd New Website Detail
3 |
4 |
12 |
13 |
14 | 5 | Title: 6 |
7 | 8 |9 | URL: 10 |
11 |
2 |
10 |
--------------------------------------------------------------------------------
/angular-spring-boot-crud-app/src/app/website-detail/website-detail.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteDetailComponent } from './website-detail.component';
4 |
5 | describe('WebsiteDetailComponent', () => {
6 | let component: WebsiteDetailComponent;
7 | let fixture: ComponentFixture{{website.title | uppercase}} Details
3 |
4 |
8 |
9 | {{website.id}}
5 |{{website.url}}
6 |{{website.title}}
7 |
2 |
--------------------------------------------------------------------------------
/angular-spring-boot-crud-app/src/app/website-edit/website-edit.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteEditComponent } from './website-edit.component';
4 |
5 | describe('WebsiteEditComponent', () => {
6 | let component: WebsiteEditComponent;
7 | let fixture: ComponentFixture{{website.title | uppercase}} Details
3 |
4 |
12 |
13 |
14 | 5 | Title: 6 |
7 | 8 |9 | URL: 10 |
11 |
2 |
3 | Add New Website
4 |
5 |
6 |
7 |
9 |
26 |
27 | List of Websites
8 || ID | 11 |URL | 12 |Title | 13 |Actions | 14 |
|---|---|---|---|
| {{website.id}} | 17 |{{website.url}} | 18 |{{website.title}} | 19 |20 | Detail 21 | Edit 22 | 23 | | 24 |
28 |
30 |
--------------------------------------------------------------------------------
/angular-spring-boot-crud-app/src/app/website-list/website-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WebsiteListComponent } from './website-list.component';
4 |
5 | describe('WebsiteListComponent', () => {
6 | let component: WebsiteListComponent;
7 | let fixture: ComponentFixtureNo Record Found!
29 |
2 |
21 |
--------------------------------------------------------------------------------
/angular-spring-boot-jwt-auth/src/app/signin/signin.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SigninComponent } from './signin.component';
4 |
5 | describe('SigninComponent', () => {
6 | let component: SigninComponent;
7 | let fixture: ComponentFixtureSignin Here
3 |{{error}}
4 |
20 | Greeting
2 |
3 |
9 | Welcome back, {{ loggedinUser }}!
4 |The ID is {{greeting.id}}
5 |The content is {{greeting.content}}
6 | 7 | 8 |
10 |
12 |
--------------------------------------------------------------------------------
/angular-springboot-security/src/app/login/login.component.css:
--------------------------------------------------------------------------------
1 | .error {
2 | padding: 15px;
3 | margin-bottom: 20px;
4 | border: 1px solid transparent;
5 | border-radius: 4px;
6 | color: #a94442;
7 | background-color: #f2dede;
8 | border-color: #ebccd1;
9 | }
10 | .msg {
11 | padding: 15px;
12 | margin-bottom: 20px;
13 | border: 1px solid transparent;
14 | border-radius: 4px;
15 | color: #31708f;
16 | background-color: #d9edf7;
17 | border-color: #bce8f1;
18 | }
19 | #login-box {
20 | width: 500px;
21 | padding: 20px;
22 | margin: 50px auto;
23 | background: #fff;
24 | -webkit-border-radius: 2px;
25 | -moz-border-radius: 2px;
26 | border: 1px solid #000;
27 | }
28 |
--------------------------------------------------------------------------------
/angular-springboot-security/src/app/login/login.component.html:
--------------------------------------------------------------------------------
1 | Login to see your greeting
11 |
2 |
21 |
--------------------------------------------------------------------------------
/angular-springboot-security/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Login Here
3 |{{error}}
4 |
20 |
2 |
--------------------------------------------------------------------------------
/angular-star-rating/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | title = 'Angular Star Rating';
10 |
11 | arr: any[] = [];
12 | index:number = -1;
13 |
14 | constructor() {
15 | this.arr = [1, 2, 3, 4, 5];
16 | }
17 |
18 | onClickItem(index) {
19 | //console.log(index);
20 | this.index = index;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/angular-star-rating/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { AppComponent } from './app.component';
5 |
6 | @NgModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | imports: [
11 | BrowserModule
12 | ],
13 | providers: [],
14 | bootstrap: [AppComponent]
15 | })
16 | export class AppModule { }
17 |
--------------------------------------------------------------------------------
/angular-star-rating/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
7 | -
4 |
- * 5 |
8 | The topic of blogging seems to come up a lot in our social media training workshops. The benefits of a quality blog are obvious – fresh content is good for your readers and your rankings. Blogs are easy to set up and even easier to update. We often tell people that if they can use Microsoft Word… they can update a blog. 9 | 10 | As easy as they are to set up, they can be difficult to maintain. A good blog is filled with relevant, timely content that is updated on a regular basis. New bloggers often start out with a bang but then fizzle out when they realize that creating content can be challenging. 11 |
12 || Product Id | 5 |Price | 6 |Sale Price | 7 |Sales Count | 8 |Sale Date | 9 |
|---|---|---|---|---|
| {{product.id}} | 14 |{{product.price}} | 15 |{{product.sale_price}} | 16 |{{product.sales_count}} | 17 |{{product.sale_date}} | 18 |
2 |
--------------------------------------------------------------------------------
/angularjs-python/src/app/user-add/user-add.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserAddComponent } from './user-add.component';
4 |
5 | describe('UserAddComponent', () => {
6 | let component: UserAddComponent;
7 | let fixture: ComponentFixtureAdd User Detail
3 |
4 |
20 |
21 |
22 |
23 | 5 | 8 |
9 |10 | 13 |
14 |15 | 18 |
19 |
2 |
--------------------------------------------------------------------------------
/angularjs-python/src/app/user-detail/user-detail.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserDetailComponent } from './user-detail.component';
4 |
5 | describe('UserDetailComponent', () => {
6 | let component: UserDetailComponent;
7 | let fixture: ComponentFixture{{user.name | uppercase}} Details
3 |Id: {{user.id}}
4 |
5 |
12 |
13 | 6 | Name: {{user.name}} 7 |
8 |9 | Email: {{user.email}} 10 |
11 |
2 |
--------------------------------------------------------------------------------
/angularjs-python/src/app/user-edit/user-edit.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserEditComponent } from './user-edit.component';
4 |
5 | describe('UserEditComponent', () => {
6 | let component: UserEditComponent;
7 | let fixture: ComponentFixture{{user.name | uppercase}} Details
3 |Id: {{user.id}}
4 |
5 |
12 |
13 |
14 |
15 | 6 | Name: 7 |
8 |9 | Email: 10 |
11 |Users
2 |
3 |
4 | Add New User
5 |
6 |
7 | | ID | 10 |Name | 11 |Actions | 13 ||
|---|---|---|---|
| {{user.id}} | 16 |{{user.name}} | 17 |{{user.email}} | 18 |19 | Detail 20 | 21 | Edit 22 | 23 | 24 | | 25 |
Greeting
2 |
3 |
9 | Welcome back, {{ loggedinUser }}!
4 |The ID is {{greeting.id}}
5 |The content is {{greeting.content}}
6 | 7 | 8 |
10 |
--------------------------------------------------------------------------------
/spring-boot-angular-security/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixtureLogin to see your greeting
11 |
2 |
--------------------------------------------------------------------------------
/spring-boot-angular-security/src/app/login/login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoginComponent } from './login.component';
4 |
5 | describe('LoginComponent', () => {
6 | let component: LoginComponent;
7 | let fixture: ComponentFixtureLogin Here
3 |{{error}}
4 |
20 |
2 |
3 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/upload-angular/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FileService } from './file.service';
3 | import { HttpResponse, HttpEventType } from '@angular/common/http';
4 |
5 | @Component({
6 | selector: 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.css']
9 | })
10 |
11 | export class AppComponent {
12 | selectedFiles: FileList;
13 | currentFile: File;
14 |
15 | constructor(private fileService: FileService) {}
16 |
17 | selectFile(event) {
18 | this.selectedFiles = event.target.files;
19 | }
20 |
21 | upload() {
22 | this.currentFile = this.selectedFiles.item(0);
23 | this.fileService.uploadFile(this.currentFile).subscribe(response => {
24 | this.selectedFiles.value = '';
25 | if (response instanceof HttpResponse) {
26 | this.msg = response.body;
27 | console.log(response.body);
28 | }
29 | });
30 | }
31 | }
--------------------------------------------------------------------------------
/upload-angular/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { HttpClientModule } from '@angular/common/http';
4 |
5 | import { AppRoutingModule } from './app-routing.module';
6 | import { AppComponent } from './app.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | imports: [
13 | BrowserModule,
14 | AppRoutingModule,
15 | HttpClientModule
16 | ],
17 | providers: [],
18 | bootstrap: [AppComponent]
19 | })
20 | export class AppModule { }
21 |
--------------------------------------------------------------------------------
/upload-angular/src/app/file.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {HttpClient, HttpRequest, HttpEvent} from '@angular/common/http';
3 | import {Observable} from 'rxjs/Observable';
4 |
5 | @Injectable({ providedIn: 'root' })
6 | export class FileService {
7 |
8 | constructor(private http: HttpClient) {}
9 |
10 | uploadFile(file: File): Observable