-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Additions/55 back button navigation (#1016)
feat: new angular back button navigation challenge
- Loading branch information
1 parent
d05c279
commit 7335c39
Showing
35 changed files
with
493 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
{ | ||
"extends": ["../../../.eslintrc.json"], | ||
"ignorePatterns": ["!**/*"], | ||
"overrides": [ | ||
{ | ||
"files": ["*.ts"], | ||
"extends": [ | ||
"plugin:@nx/angular", | ||
"plugin:@angular-eslint/template/process-inline-templates" | ||
], | ||
"rules": { | ||
"@angular-eslint/directive-selector": [ | ||
"error", | ||
{ | ||
"type": "attribute", | ||
"prefix": "app", | ||
"style": "camelCase" | ||
} | ||
], | ||
"@angular-eslint/component-selector": [ | ||
"error", | ||
{ | ||
"type": "element", | ||
"prefix": "app", | ||
"style": "kebab-case" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"files": ["*.html"], | ||
"extends": ["plugin:@nx/angular-template"], | ||
"rules": {} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# Back-Button-Navigation | ||
|
||
> author: ioannis-tsironis | ||
### Run Application | ||
|
||
```bash | ||
npx nx serve angular-back-button-navigation | ||
``` | ||
|
||
### Documentation and Instruction | ||
|
||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/55-back-button-navigation/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
/* eslint-disable */ | ||
export default { | ||
displayName: 'angular-back-button-navigation', | ||
preset: '../../../jest.preset.js', | ||
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], | ||
coverageDirectory: '../../../coverage/apps/angular/55-back-button-navigation', | ||
transform: { | ||
'^.+\\.(ts|mjs|js|html)$': [ | ||
'jest-preset-angular', | ||
{ | ||
tsconfig: '<rootDir>/tsconfig.spec.json', | ||
stringifyContentPathRegex: '\\.(html|svg)$', | ||
}, | ||
], | ||
}, | ||
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], | ||
snapshotSerializers: [ | ||
'jest-preset-angular/build/serializers/no-ng-attributes', | ||
'jest-preset-angular/build/serializers/ng-snapshot', | ||
'jest-preset-angular/build/serializers/html-comment', | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
{ | ||
"name": "angular-back-button-navigation", | ||
"$schema": "../../../node_modules/nx/schemas/project-schema.json", | ||
"projectType": "application", | ||
"prefix": "app", | ||
"sourceRoot": "apps/angular/55-back-button-navigation/src", | ||
"tags": [], | ||
"targets": { | ||
"build": { | ||
"executor": "@angular-devkit/build-angular:application", | ||
"outputs": ["{options.outputPath}"], | ||
"options": { | ||
"outputPath": "dist/apps/angular/55-back-button-navigation", | ||
"index": "apps/angular/55-back-button-navigation/src/index.html", | ||
"browser": "apps/angular/55-back-button-navigation/src/main.ts", | ||
"polyfills": ["zone.js"], | ||
"tsConfig": "apps/angular/55-back-button-navigation/tsconfig.app.json", | ||
"inlineStyleLanguage": "scss", | ||
"assets": [ | ||
{ | ||
"glob": "**/*", | ||
"input": "apps/angular/55-back-button-navigation/public" | ||
} | ||
], | ||
"styles": [ | ||
"apps/angular/55-back-button-navigation/src/styles.scss", | ||
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css" | ||
], | ||
"scripts": [] | ||
}, | ||
"configurations": { | ||
"production": { | ||
"budgets": [ | ||
{ | ||
"type": "initial", | ||
"maximumWarning": "500kb", | ||
"maximumError": "1mb" | ||
}, | ||
{ | ||
"type": "anyComponentStyle", | ||
"maximumWarning": "2kb", | ||
"maximumError": "4kb" | ||
} | ||
], | ||
"outputHashing": "all" | ||
}, | ||
"development": { | ||
"optimization": false, | ||
"extractLicenses": false, | ||
"sourceMap": true | ||
} | ||
}, | ||
"defaultConfiguration": "production" | ||
}, | ||
"serve": { | ||
"executor": "@angular-devkit/build-angular:dev-server", | ||
"configurations": { | ||
"production": { | ||
"buildTarget": "angular-back-button-navigation:build:production" | ||
}, | ||
"development": { | ||
"buildTarget": "angular-back-button-navigation:build:development" | ||
} | ||
}, | ||
"defaultConfiguration": "development" | ||
}, | ||
"extract-i18n": { | ||
"executor": "@angular-devkit/build-angular:extract-i18n", | ||
"options": { | ||
"buildTarget": "angular-back-button-navigation:build" | ||
} | ||
}, | ||
"lint": { | ||
"executor": "@nx/eslint:lint" | ||
}, | ||
"test": { | ||
"executor": "@nx/jest:jest", | ||
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"], | ||
"options": { | ||
"jestConfig": "apps/angular/55-back-button-navigation/jest.config.ts" | ||
} | ||
} | ||
} | ||
} |
1 change: 1 addition & 0 deletions
1
apps/angular/55-back-button-navigation/src/app/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<router-outlet></router-outlet> |
10 changes: 10 additions & 0 deletions
10
apps/angular/55-back-button-navigation/src/app/app.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { Component } from '@angular/core'; | ||
import { RouterLink, RouterOutlet } from '@angular/router'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [RouterOutlet, RouterLink], | ||
selector: 'app-root', | ||
templateUrl: './app.component.html', | ||
}) | ||
export class AppComponent {} |
10 changes: 10 additions & 0 deletions
10
apps/angular/55-back-button-navigation/src/app/app.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; | ||
import { provideRouter } from '@angular/router'; | ||
import { APP_ROUTES } from './app.routes'; | ||
|
||
export const appConfig: ApplicationConfig = { | ||
providers: [ | ||
provideZoneChangeDetection({ eventCoalescing: true }), | ||
provideRouter(APP_ROUTES), | ||
], | ||
}; |
24 changes: 24 additions & 0 deletions
24
apps/angular/55-back-button-navigation/src/app/app.routes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { Routes } from '@angular/router'; | ||
import { HomeComponent } from './home/home.component'; | ||
import { SensitiveActionComponent } from './sensitive-action/sensitive-action.component'; | ||
import { SimpleActionComponent } from './simple-action/simple-action.component'; | ||
|
||
export const APP_ROUTES: Routes = [ | ||
{ | ||
path: '', | ||
pathMatch: 'full', | ||
redirectTo: 'home', | ||
}, | ||
{ | ||
path: 'home', | ||
component: HomeComponent, | ||
}, | ||
{ | ||
path: 'simple-action', | ||
component: SimpleActionComponent, | ||
}, | ||
{ | ||
path: 'sensitive-action', | ||
component: SensitiveActionComponent, | ||
}, | ||
]; |
6 changes: 6 additions & 0 deletions
6
apps/angular/55-back-button-navigation/src/app/dialog/dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<h2 mat-dialog-title>Delete file</h2> | ||
<mat-dialog-content>Would you like to delete cat.jpeg?</mat-dialog-content> | ||
<mat-dialog-actions> | ||
<button mat-button mat-dialog-close>No</button> | ||
<button mat-button mat-dialog-close cdkFocusInitial>Ok</button> | ||
</mat-dialog-actions> |
26 changes: 26 additions & 0 deletions
26
apps/angular/55-back-button-navigation/src/app/dialog/dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { | ||
MatDialogActions, | ||
MatDialogClose, | ||
MatDialogContent, | ||
MatDialogRef, | ||
MatDialogTitle, | ||
} from '@angular/material/dialog'; | ||
|
||
@Component({ | ||
selector: 'app-dialog-dialog', | ||
templateUrl: './dialog.component.html', | ||
standalone: true, | ||
imports: [ | ||
MatButtonModule, | ||
MatDialogActions, | ||
MatDialogClose, | ||
MatDialogTitle, | ||
MatDialogContent, | ||
], | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class DialogComponent { | ||
readonly dialogRef = inject(MatDialogRef<DialogComponent>); | ||
} |
7 changes: 7 additions & 0 deletions
7
apps/angular/55-back-button-navigation/src/app/home/home.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<a mat-raised-button routerLink="/simple-action" routerLinkActive="active"> | ||
Go to simple dialog action page | ||
</a> | ||
|
||
<a mat-raised-button routerLink="/sensitive-action" routerLinkActive="active"> | ||
Go to sensitive dialog action page | ||
</a> |
11 changes: 11 additions & 0 deletions
11
apps/angular/55-back-button-navigation/src/app/home/home.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Component } from '@angular/core'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { RouterLink } from '@angular/router'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [MatButtonModule, RouterLink], | ||
selector: 'app-home', | ||
templateUrl: './home.component.html', | ||
}) | ||
export class HomeComponent {} |
3 changes: 3 additions & 0 deletions
3
...ngular/55-back-button-navigation/src/app/sensitive-action/sensitive-action.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<button mat-raised-button (click)="openDialog()"> | ||
Open dialog with confirmation dialog on browser back button click | ||
</button> |
20 changes: 20 additions & 0 deletions
20
.../angular/55-back-button-navigation/src/app/sensitive-action/sensitive-action.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { Component, inject } from '@angular/core'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { MatDialog } from '@angular/material/dialog'; | ||
import { DialogComponent } from '../dialog/dialog.component'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [MatButtonModule], | ||
selector: 'app-sensitive-action', | ||
templateUrl: './sensitive-action.component.html', | ||
}) | ||
export class SensitiveActionComponent { | ||
readonly #dialog = inject(MatDialog); | ||
|
||
openDialog(): void { | ||
this.#dialog.open(DialogComponent, { | ||
width: '250px', | ||
}); | ||
} | ||
} |
1 change: 1 addition & 0 deletions
1
apps/angular/55-back-button-navigation/src/app/simple-action/simple-action.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<button mat-raised-button (click)="openDialog()">Open simple dialog</button> |
20 changes: 20 additions & 0 deletions
20
apps/angular/55-back-button-navigation/src/app/simple-action/simple-action.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { Component, inject } from '@angular/core'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { MatDialog } from '@angular/material/dialog'; | ||
import { DialogComponent } from '../dialog/dialog.component'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [MatButtonModule], | ||
selector: 'app-simple-action', | ||
templateUrl: './simple-action.component.html', | ||
}) | ||
export class SimpleActionComponent { | ||
readonly #dialog = inject(MatDialog); | ||
|
||
openDialog(): void { | ||
this.#dialog.open(DialogComponent, { | ||
width: '250px', | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<title>angular-back-button-navigation</title> | ||
<base href="/" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<link rel="icon" type="image/x-icon" href="favicon.ico" /> | ||
</head> | ||
<body> | ||
<app-root></app-root> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { bootstrapApplication } from '@angular/platform-browser'; | ||
import { AppComponent } from './app/app.component'; | ||
import { appConfig } from './app/app.config'; | ||
|
||
bootstrapApplication(AppComponent, appConfig).catch((err) => | ||
console.error(err), | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
@use '@angular/material' as mat; | ||
|
||
/* You can add global styles to this file, and also import other style files */ | ||
|
||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
|
||
@include mat.core(); | ||
|
||
$theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette); | ||
$theme-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400); | ||
|
||
$theme-warn: mat.m2-define-palette(mat.$m2-red-palette); | ||
|
||
$theme: mat.m2-define-light-theme( | ||
( | ||
color: ( | ||
primary: $theme-primary, | ||
accent: $theme-accent, | ||
warn: $theme-warn, | ||
), | ||
typography: mat.m2-define-typography-config(), | ||
) | ||
); | ||
|
||
@include mat.dialog-theme($theme); | ||
@include mat.button-theme($theme); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import '@testing-library/jest-dom'; | ||
import 'jest-preset-angular/setup-jest'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind'); | ||
const { join } = require('path'); | ||
|
||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
content: [ | ||
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), | ||
...createGlobPatternsForDependencies(__dirname), | ||
], | ||
theme: { | ||
extend: {}, | ||
}, | ||
plugins: [], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"extends": "./tsconfig.json", | ||
"compilerOptions": { | ||
"outDir": "../../../dist/out-tsc", | ||
"types": [] | ||
}, | ||
"files": ["src/main.ts"], | ||
"include": ["src/**/*.d.ts"], | ||
"exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] | ||
} |
Oops, something went wrong.