vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-12 05:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(anchorscrolling): new challenge

Browse Source
This commit is contained in:
thomas
2023-05-02 12:36:50 +02:00
parent 6db4dfbb9b
commit 75fa6eac9b
17 changed files with 303 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/anchor-scrolling/src/app/anchor-button.component.ts Normal file
View File

@@ -0,0 +1,19 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, Input } from '@angular/core';
import { RouterLinkWithHref } from '@angular/router';
@Component({
selector: 'anchor-button',
standalone: true,
imports: [RouterLinkWithHref],
template: `
<a [routerLink]="href">
<ng-content></ng-content>
</a>
`,
host: {
class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
},
})
export class AnchorButtonComponent {
@Input() href = '#top';
}

19
apps/anchor-scrolling/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import { AnchorButtonComponent } from './anchor-button.component';
@Component({
standalone: true,
imports: [AnchorButtonComponent],
selector: 'app-root',
template: `
<div id="top" class="h-screen bg-gray-500">
Empty
<anchor-button href="#bottom">Scroll Bottom</anchor-button>
</div>
<div id="bottom" class="h-screen bg-blue-300">
I want to scroll each
<anchor-button href="#top">Scroll Top</anchor-button>
</div>
`,
})
export class AppComponent {}

3
apps/anchor-scrolling/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,3 @@
import { Route } from '@angular/router';
export const appRoutes: Route[] = [];

0
apps/anchor-scrolling/src/assets/.gitkeep Normal file
View File

BIN
apps/anchor-scrolling/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/anchor-scrolling/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AnchorScrolling</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>

11
apps/anchor-scrolling/src/main.ts Normal file
View File

@@ -0,0 +1,11 @@
import { bootstrapApplication } from '@angular/platform-browser';
import {
provideRouter,
withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
}).catch((err) => console.error(err));

5
apps/anchor-scrolling/src/styles.scss Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */

1
apps/anchor-scrolling/src/test-setup.ts Normal file
View File

@@ -0,0 +1 @@
import 'jest-preset-angular/setup-jest';