Skip to content

Commit 44650fe

Browse files
damingerdaidamingerdai
committed
docs: add getting started view
1 parent c52ba2a commit 44650fe

19 files changed

Lines changed: 438 additions & 286 deletions

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@angular/ssr": "^20.0.2",
5555
"bootstrap": "^5.3.2",
5656
"express": "^4.18.2",
57+
"marked": "^15.0.12",
5758
"rxjs": "~7.8.0",
5859
"tslib": "^2.3.0",
5960
"zone.js": "~0.15.0"

‎packages/dev-app/src/app/app.component.html‎

Lines changed: 4 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,4 @@
1-
<nav class="navbar navbar-dark bg-primary">
2-
<div class="container-fluid">
3-
<a class="navbar-brand">
4-
<img
5-
width="30"
6-
height="24"
7-
class="d-inline-block align-text-top"
8-
alt="Angular Logo"
9-
src="./assets/img/angular-white-transparent.svg"
10-
/>
11-
Angular Toaster
12-
</a>
13-
<div class="d-flex navbar-dark">
14-
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
15-
<li class="nav-item col-6 col-lg-auto">
16-
<a
17-
class="nav-link py-2 px-0 px-lg-2"
18-
href="https://github.com/damingerdai/angular-toaster"
19-
target="_blank"
20-
rel="noopener"
21-
>
22-
<img
23-
alt="github"
24-
src="./assets/img/github-circle-white-transparent.svg"
25-
/>
26-
</a>
27-
</li>
28-
</ul>
29-
</div>
30-
</div>
31-
</nav>
32-
<div class="content" role="main">
33-
<div class="row">
34-
<div class="col-lg-12">
35-
<div class="card">
36-
<div class="card-header">
37-
<i class="fa fa-align-justify"></i>Angular-Toaster
38-
<div class="card-header-actions">
39-
<a
40-
href="https://github.com/damingerdai/angular-toaster"
41-
class="card-header-action"
42-
target="_blank"
43-
>doc</a
44-
>
45-
</div>
46-
</div>
47-
<div class="card-body">
48-
<button
49-
type="button"
50-
class="btn btn-success px-2"
51-
(click)="show('success')"
52-
>
53-
Try success
54-
</button>
55-
<button
56-
type="button"
57-
class="btn btn-warning px-2"
58-
(click)="show('warning')"
59-
>
60-
Try warning
61-
</button>
62-
<button
63-
type="button"
64-
class="btn btn-danger px-2"
65-
(click)="show('wait')"
66-
>
67-
Try wait
68-
</button>
69-
<button
70-
type="button"
71-
class="btn btn-info px-2"
72-
(click)="show('info')"
73-
>
74-
Try info
75-
</button>
76-
<button
77-
type="button"
78-
class="btn btn-info px-2"
79-
(click)="show('error')"
80-
>
81-
Try error
82-
</button>
83-
<button type="button" class="btn btn-info px-2" (click)="clear()">
84-
clear
85-
</button>
86-
</div>
87-
</div>
88-
</div>
89-
</div>
90-
</div>
91-
<toaster-container [toasterconfig]="config"></toaster-container>
1+
<app-navbar ></app-navbar>
2+
<main>
3+
<router-outlet></router-outlet>
4+
</main>

‎packages/dev-app/src/app/app.component.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
.btn {
2-
margin: 0.5rem !important;
3-
}
1+

‎packages/dev-app/src/app/app.component.ts‎

Lines changed: 5 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,13 @@
1-
import { AfterViewInit, Component, inject } from "@angular/core";
1+
import { Component } from "@angular/core";
22
import { RouterOutlet } from "@angular/router";
3-
import {
4-
DefaultTypeClasses,
5-
DefaultIconClasses,
6-
IToasterConfig,
7-
ToasterConfig,
8-
Toast,
9-
ToastType,
10-
ToasterService,
11-
ToasterContainerComponent,
12-
} from "angular-toaster";
13-
14-
type ExtendedToastType = ("customtype" | "bad value") & ToastType;
3+
import { NavbarComponent } from "./components/navbar/navbar.component";
154

165
@Component({
176
selector: "app-root",
18-
imports: [RouterOutlet, ToasterContainerComponent],
7+
imports: [RouterOutlet, NavbarComponent],
198
templateUrl: "./app.component.html",
209
styleUrl: "./app.component.scss",
2110
})
22-
export class AppComponent implements AfterViewInit {
23-
title = "dev-app";
24-
25-
extendedTypeClasses = {
26-
...DefaultTypeClasses,
27-
...{ customtype: "angular-toast-success" },
28-
};
29-
extendedIconClasses = {
30-
...DefaultIconClasses,
31-
...{ customtype: "icon-error" },
32-
};
33-
34-
config: IToasterConfig = new ToasterConfig({
35-
animation: "fade",
36-
newestOnTop: true,
37-
positionClass: "angular-toast-bottom-right",
38-
toastContainerId: 1,
39-
timeout: 0,
40-
showCloseButton: true, // mouseoverTimerStop: true
41-
typeClasses: this.extendedTypeClasses as ExtendedToastType,
42-
iconClasses: this.extendedIconClasses as ExtendedToastType,
43-
});
44-
45-
public toasterService: ToasterService = inject(ToasterService);
46-
47-
show(type: ToastType) {
48-
this.toasterService.pop({
49-
type,
50-
title: "Hello world!",
51-
body: "Toastr fun!",
52-
timeout: 10000,
53-
});
54-
}
55-
56-
popToast() {
57-
const toast = this.toasterService.pop({
58-
type: "success",
59-
title: "Home Title",
60-
body: "Home Body",
61-
});
62-
63-
window.setTimeout(() => (toast.title = "Updated Home Title"), 1000);
64-
}
65-
66-
persistentToast() {
67-
this.toasterService
68-
.popAsync({
69-
type: "customtype" as ExtendedToastType,
70-
title: "Click Me",
71-
body: "I am sticky with a really long body let us see what happens",
72-
tapToDismiss: false,
73-
onClickCallback: (t) => console.log(t.toastId),
74-
showCloseButton: true,
75-
})
76-
.subscribe((x) => console.log(x));
77-
}
78-
79-
ngAfterViewInit() {
80-
console.log("entering view init");
81-
const t = "bad value";
82-
const toast: Toast = {
83-
type: t as ExtendedToastType,
84-
body: "I am init toast",
85-
};
86-
this.toasterService.popAsync(toast);
87-
}
88-
89-
toto() {
90-
console.log("todo button clicked");
91-
const toast: Toast = {
92-
type: "success",
93-
body: "I am todo toast",
94-
timeout: 5000,
95-
progressBar: true,
96-
};
97-
this.toasterService.pop(toast);
98-
}
99-
100-
clear() {
101-
this.toasterService.clear();
102-
}
11+
export class AppComponent {
12+
10313
}

‎packages/dev-app/src/app/app.config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { provideRouter } from '@angular/router';
55
import { routes } from './app.routes';
66
import { provideClientHydration } from '@angular/platform-browser';
77
import { provideAngularToaster } from 'angular-toaster';
8+
import { provideHttpClient, withFetch } from '@angular/common/http';
89

910
export const appConfig: ApplicationConfig = {
1011
providers: [
1112
provideAnimationsAsync(),
1213
provideRouter(routes),
1314
provideAngularToaster(),
14-
provideClientHydration()
15+
provideClientHydration(),
16+
provideHttpClient(withFetch()),
1517
]
1618
};

‎packages/dev-app/src/app/app.routes.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
11
import { Routes } from '@angular/router';
22

3-
export const routes: Routes = [];
3+
export const routes: Routes = [
4+
{
5+
path: '',
6+
children: [
7+
{
8+
path: '',
9+
redirectTo: 'home',
10+
pathMatch: 'full'
11+
},
12+
{
13+
path: 'home',
14+
loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
15+
},
16+
{
17+
path: 'getting-started',
18+
loadComponent: () => import('./pages/getting-started/getting-started.component').then(m => m.GettingStartedComponent)
19+
}
20+
]
21+
},
22+
23+
];

‎packages/dev-app/src/app/components/navbar/navbar.component.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<nav class="navbar navbar-dark bg-primary px-2">
2+
<a class="navbar-brand">
3+
<img width="30" height="24" class="d-inline-block align-text-top" alt="Angular Logo"
4+
src="./assets/img/angular-white-transparent.svg" />
5+
Angular Toaster
6+
</a>
7+
<div class="navbar-nav me-auto mb-2 mb-lg-0 mx-2">
8+
<a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>
9+
</div>
10+
<div class="navbar-nav me-auto mb-2 mb-lg-0 mx-2">
11+
<a class="nav-link" routerLink="/getting-started" routerLinkActive="active">Get Started</a>
12+
</div>
13+
<div class="flex-spacer"></div>
14+
<div class="nav-item">
15+
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/damingerdai/angular-toaster" target="_blank"
16+
rel="noopener">
17+
<img alt="github" src="./assets/img/github-circle-white-transparent.svg" />
18+
</a>
19+
</div>
20+
</nav>

‎packages/dev-app/src/app/components/navbar/navbar.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.navbar {
2+
justify-content: unset;
3+
}
4+
5+
.flex-spacer {
6+
flex-grow: 1;
7+
}

‎packages/dev-app/src/app/components/navbar/navbar.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { NavbarComponent } from './navbar.component';
4+
5+
describe('NavbarComponent', () => {
6+
let component: NavbarComponent;
7+
let fixture: ComponentFixture<NavbarComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [NavbarComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(NavbarComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎packages/dev-app/src/app/components/navbar/navbar.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
import { RouterLink, RouterLinkActive } from '@angular/router';
3+
4+
@Component({
5+
selector: 'app-navbar',
6+
imports: [
7+
RouterLink,
8+
RouterLinkActive,
9+
],
10+
templateUrl: './navbar.component.html',
11+
styleUrl: './navbar.component.scss'
12+
})
13+
export class NavbarComponent {
14+
15+
}

0 commit comments

Comments
 (0)