parent1 works!
2 | Go to Parent1Child1 3 | -------------------------------------------------------------------------------- /src/app/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./browser-storage.service"; 2 | export * from "./app-config.service"; 3 | export * from "./seo-service"; 4 | -------------------------------------------------------------------------------- /src/app/core/bread-crumb/bread-crumb.ts: -------------------------------------------------------------------------------- 1 | export interface BreadCrumb { 2 | label: string; 3 | url?: string; 4 | glyphIcon?: string; 5 | }; 6 | -------------------------------------------------------------------------------- /src/app/product/category.ts: -------------------------------------------------------------------------------- 1 | export class Category { 2 | constructor( 3 | public categoryId: number, 4 | public categoryName: string 5 | ) { } 6 | } 7 | -------------------------------------------------------------------------------- /src/app/product/product.ts: -------------------------------------------------------------------------------- 1 | export class Product { 2 | constructor( 3 | public productId: number, 4 | public productName: string 5 | ) { } 6 | } 7 | -------------------------------------------------------------------------------- /src/app/using-third-party-libraries/typed-sha/typed-sha.component.html: -------------------------------------------------------------------------------- 1 |SHA-512 Hash / Typed
2 | 3 |String: This is a test
4 |HEX: {{hash}}
5 | -------------------------------------------------------------------------------- /src/app/client-ip-address/get-ip/get-ip.component.html: -------------------------------------------------------------------------------- 1 |Client's IP Address
2 |
3 |
5 |
--------------------------------------------------------------------------------
/src/app/simple-grid/app-product.ts:
--------------------------------------------------------------------------------
1 | export interface AppProduct {
2 | productId: number;
3 | productName: string;
4 | price: number;
5 | isAvailable: boolean;
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/simple-grid/grid-column.ts:
--------------------------------------------------------------------------------
1 | export interface GridColumn {
2 | title: string;
3 | propertyName: string;
4 | isSortable: boolean;
5 | isVisible: boolean;
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/using-third-party-libraries/untyped-sha/untyped-sha.component.html:
--------------------------------------------------------------------------------
1 | {{ clientIp | json}}
4 | SHA-512 Hash / UnTyped
2 | 3 |String: This is a test
4 |HEX: {{hash}}
5 | -------------------------------------------------------------------------------- /src/app/bread-crumb-sample/parent1-child1/parent1-child1.component.html: -------------------------------------------------------------------------------- 1 |parent1-child1 works!
2 | Go to Parent1Child1Child1 3 | -------------------------------------------------------------------------------- /src/app/product/product-group-form.ts: -------------------------------------------------------------------------------- 1 | export class ProductGroupForm { 2 | constructor( 3 | public categoryId?: number, 4 | public productId?: number 5 | ) { } 6 | } 7 | -------------------------------------------------------------------------------- /src/app/read-app-config/read-app-config-test/read-app-config-test.component.html: -------------------------------------------------------------------------------- 1 |Read config @application startup
2 | 3 |
4 | host: {{host}}
5 |
6 |
--------------------------------------------------------------------------------
/Models/Ticket.cs:
--------------------------------------------------------------------------------
1 | namespace AngularTemplateDrivenFormsLab.Models
2 | {
3 | public class Ticket
4 | {
5 | public int Id { set; get; }
6 | public string Description { set; get; }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/detect-common-errors/detect-common-errors-test/detect-common-errors-test.component.html:
--------------------------------------------------------------------------------
1 | 2 | detect-common-errors-test works! 3 |
4 | 5 |Hello {{ponyModel.name}} 6 | 7 |
{{ 12.3 | lowercase }}
8 |
--------------------------------------------------------------------------------
/src/app/model-state-validation/movie.ts:
--------------------------------------------------------------------------------
1 | export class Movie {
2 | constructor(
3 | public title: string,
4 | public director: string,
5 | public ticketPrice: number,
6 | public releaseDate: string
7 | ) { }
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/simple-grid/paged-query-model.ts:
--------------------------------------------------------------------------------
1 | export interface PagedQueryModel {
2 | sortBy: string;
3 | isAscending: boolean;
4 | page: number;
5 | pageSize: number;
6 | filterByColumn: string;
7 | filterByValue: string;
8 | }
9 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "node"
10 | ]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/employee/employee.ts:
--------------------------------------------------------------------------------
1 | export class Employee {
2 | constructor(
3 | public firstName: string,
4 | public lastName: string,
5 | public isFullTime: boolean,
6 | public paymentType: string,
7 | public primaryLanguage: string
8 | ) {}
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/service-component-communication/second/second.component.html:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "baseUrl": "",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from "protractor";
2 |
3 | export class AngularTemplateDrivenFormsLabPage {
4 | navigateTo() {
5 | return browser.get("/");
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css("app-root h1")).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/core/window.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from "@angular/core";
2 |
3 | function getWindow(): any {
4 | return window;
5 | }
6 |
7 | @Injectable()
8 | export class WindowRefService {
9 | get nativeWindow(): any {
10 | return getWindow();
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/Models/PagedQueryResult.cs:
--------------------------------------------------------------------------------
1 | using System.Collections.Generic;
2 |
3 | namespace AngularTemplateDrivenFormsLab.Models
4 | {
5 | public class PagedQueryResult
3 |
5 | Second Component
4 |
6 |
8 | {{message}}
7 |Angular HttpClient Blob
2 | 3 |#sampleImage1
4 |imageBlobUrl
7 |sanitizedImageBlobUrl
10 |
2 |
12 |
--------------------------------------------------------------------------------
/Models/Product.cs:
--------------------------------------------------------------------------------
1 | namespace AngularTemplateDrivenFormsLab.Models
2 | {
3 | public class Product
4 | {
5 | public int ProductId { set; get; }
6 | public string ProductName { set; get; }
7 | public decimal Price { set; get; }
8 | public bool IsAvailable { set; get; }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/client-ip-address/ip.ts:
--------------------------------------------------------------------------------
1 | export interface IP {
2 | ip: string;
3 | country_code: string;
4 | country_name: string;
5 | region_code: string;
6 | region_name: string;
7 | city: string;
8 | zip_code: string;
9 | time_zone: string;
10 | latitude: number;
11 | longitude: number;
12 | metro_code: number;
13 | }
14 |
--------------------------------------------------------------------------------
/.github/lock.yml:
--------------------------------------------------------------------------------
1 | daysUntilLock: 90
2 |
3 | skipCreatedBefore: false
4 |
5 | exemptLabels: []
6 |
7 | lockLabel: false
8 |
9 | lockComment: >
10 | This thread has been automatically locked since there has not been
11 | any recent activity after it was closed. Please open a new issue for
12 | related problems.
13 |
14 | setLockReason: true
15 |
--------------------------------------------------------------------------------
/src/app/core/bread-crumb/bread-crumb.component.html:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/app/service-component-communication/third/third.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
8 |
9 |
11 |
2 |
10 |
--------------------------------------------------------------------------------
/src/app/detect-common-errors/detect-common-errors-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.forChild(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class DetectCommonErrorsRoutingModule { }
11 |
--------------------------------------------------------------------------------
/src/app/welcome/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-welcome",
5 | templateUrl: "./welcome.component.html",
6 | styleUrls: ["./welcome.component.css"]
7 | })
8 | export class WelcomeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 | # Summary of the issue
2 |
3 |
4 |
5 | ## Environment
6 |
7 | ```
8 | The in-use version:
9 | Operating system:
10 | IDE: (e.g. Visual Studio 2015)
11 | ```
12 |
13 | ## Example code/Steps to reproduce:
14 |
15 | ```
16 | paste your core code
17 | ```
18 |
19 | ## Output:
20 |
21 | ```
22 | Exception message:
23 | Full Stack trace:
24 | ```
25 |
26 |
--------------------------------------------------------------------------------
/src/app/custom-pipe/moment-jalaali.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from "@angular/core";
2 |
3 | import * as momentJalaali from "moment-jalaali";
4 |
5 | @Pipe({
6 | name: "momentJalaali"
7 | })
8 | export class MomentJalaaliPipe implements PipeTransform {
9 | transform(value: any, args?: any): any {
10 | return momentJalaali(value).format(args);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
5 | Third Component
4 |
6 |
9 | {{message}}
7 | 8 |
2 |
11 |
--------------------------------------------------------------------------------
/src/app/injection-beyond-classes/thismodule.config.ts:
--------------------------------------------------------------------------------
1 | import { InjectionToken } from "@angular/core";
2 |
3 | export let APP_CONFIG = new InjectionToken
3 |
5 | Child Component
4 |
6 | {{amount}}
7 |
8 |
9 |
10 |
2 |
11 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "baseUrl": "",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts",
15 | "polyfills.ts"
16 | ],
17 | "include": [
18 | "**/*.spec.ts",
19 | "**/*.d.ts"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | import { SeoService } from "./core/seo-service";
4 |
5 | @Component({
6 | selector: "app-root",
7 | templateUrl: "./app.component.html",
8 | styleUrls: ["./app.component.css"]
9 | })
10 | export class AppComponent {
11 |
12 | title = "T.D. Forms Lab";
13 |
14 | constructor(private seoService: SeoService) {
15 | this.seoService.enableSeo();
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/shared/confirm-modal/confirm-modal.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-confirm-modal",
5 | templateUrl: "./confirm-modal.component.html",
6 | styleUrls: ["./confirm-modal.component.css"]
7 | })
8 | export class ConfirmModalComponent {
9 |
10 | args: {
11 | title: string;
12 | message: string;
13 | } | null = null;
14 |
15 | close!: (val?: any) => void;
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/timers/timers.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { TimersRoutingModule } from "./timers-routing.module";
5 | import { UsingTimersComponent } from "./using-timers/using-timers.component";
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | TimersRoutingModule
11 | ],
12 | declarations: [UsingTimersComponent]
13 | })
14 | export class TimersModule { }
15 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularTemplateDrivenFormsLabPage } from "./app.po";
2 |
3 | describe("angular-template-driven-forms-lab App", () => {
4 | let page: AngularTemplateDrivenFormsLabPage;
5 |
6 | beforeEach(() => {
7 | page = new AngularTemplateDrivenFormsLabPage();
8 | });
9 |
10 | it("should display welcome message", () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual("Welcome to app!!");
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/src/app/bread-crumb-sample/parent1-child1-child1/parent1-child1-child1.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-parent1-child1-child1",
5 | templateUrl: "./parent1-child1-child1.component.html",
6 | styleUrls: ["./parent1-child1-child1.component.css"]
7 | })
8 | export class Parent1Child1Child1Component implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/display-pdf/display-pdf-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { ViewPdfComponent } from "./view-pdf/view-pdf.component";
2 | import { NgModule } from "@angular/core";
3 | import { Routes, RouterModule } from "@angular/router";
4 |
5 | const routes: Routes = [
6 | { path: "viewPdf", component: ViewPdfComponent }
7 | ];
8 |
9 | @NgModule({
10 | imports: [RouterModule.forChild(routes)],
11 | exports: [RouterModule]
12 | })
13 | export class DisplayPdfRoutingModule { }
14 |
--------------------------------------------------------------------------------
/src/app/service-component-communication/sample.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from "@angular/core";
2 | import { BehaviorSubject } from "rxjs";
3 |
4 | @Injectable()
5 | export class SampleService {
6 |
7 | private msgSource = new BehaviorSubject
3 |
5 | First Component
4 |
6 |
10 | {{editedMsg}}
7 | 8 | 9 |
2 |
7 | {{ args?.title }}
3 | 6 |
8 |
10 |
14 |
--------------------------------------------------------------------------------
/src/app/client-ip-address/client-ip-address.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from "@angular/common";
2 | import { NgModule } from "@angular/core";
3 |
4 | import { ClientIpAddressRoutingModule } from "./client-ip-address-routing.module";
5 | import { GetIpComponent } from "./get-ip/get-ip.component";
6 | import { JobService } from "./job.service";
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | ClientIpAddressRoutingModule
12 | ],
13 | declarations: [GetIpComponent],
14 | providers: [JobService]
15 | })
16 | export class ClientIpAddressModule { }
17 |
--------------------------------------------------------------------------------
/src/app/angular-security/show-html/show-html.component.html:
--------------------------------------------------------------------------------
1 | {{ args?.message }}
9 |Binding innerHTML
2 | 3 |Bound value:
4 |{{htmlContent}}
5 | 6 |Result of binding to innerHTML:
7 | 8 | 9 |Result of binding to dataContainer:
10 | 11 | 12 |Result of bypassSecurityTrustHtml:
13 | 14 | 15 |Result of binding to sanitizedHtml:
16 | 17 | 18 |Result of using the safe pipe:
19 | 20 | -------------------------------------------------------------------------------- /src/app/browser-storage-sample/browser-storage-sample-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserStorageSampleTestComponent } from "./browser-storage-sample-test/browser-storage-sample-test.component"; 2 | import { NgModule } from "@angular/core"; 3 | import { Routes, RouterModule } from "@angular/router"; 4 | 5 | const routes: Routes = [ 6 | { path: "showBrowserStorageSample", component: BrowserStorageSampleTestComponent } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class BrowserStorageSampleRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/custom-pipe/moment-jalaali-test/moment-jalaali-test.component.html: -------------------------------------------------------------------------------- 1 |Using moment-jalaali
2 |
3 | اكنون:
4 | {{now}}
5 |
6 | {{nowLongDateFormat}} 7 |
8 | {{nowExtraLongDateFormat}} 9 |
10 |
11 | 6 | {{nowLongDateFormat}} 7 |
8 | {{nowExtraLongDateFormat}} 9 |
Server side dates:
12 |
13 | {{date | momentJalaali:'jYYYY/jMM/jDD hh:mm' }},
14 | {{date | momentJalaali:'jD jMMMM jYYYY [ساعت] LT'}}
15 |
16 |
--------------------------------------------------------------------------------
/src/app/detect-common-errors/detect-common-errors.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from "@angular/common";
2 | import { NgModule } from "@angular/core";
3 |
4 | import { DetectCommonErrorsRoutingModule } from "./detect-common-errors-routing.module";
5 | import { DetectCommonErrorsTestComponent } from "./detect-common-errors-test/detect-common-errors-test.component";
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | DetectCommonErrorsRoutingModule
11 | ],
12 | declarations: [DetectCommonErrorsTestComponent]
13 | })
14 | export class DetectCommonErrorsModule { }
15 |
--------------------------------------------------------------------------------
/src/app/model-state-validation/model-state-validation-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { ModelStateValidationTestComponent } from "./model-state-validation-test/model-state-validation-test.component";
2 | import { NgModule } from "@angular/core";
3 | import { Routes, RouterModule } from "@angular/router";
4 |
5 | const routes: Routes = [
6 | { path: "modelStateValidationTest", component: ModelStateValidationTestComponent }
7 | ];
8 |
9 | @NgModule({
10 | imports: [RouterModule.forChild(routes)],
11 | exports: [RouterModule]
12 | })
13 | export class ModelStateValidationRoutingModule { }
14 |
--------------------------------------------------------------------------------
/src/app/display-pdf/display-pdf.module.ts:
--------------------------------------------------------------------------------
1 | import { DownloadPdfDataService } from "./download-pdf-data.service";
2 | import { NgModule } from "@angular/core";
3 | import { CommonModule } from "@angular/common";
4 |
5 | import { DisplayPdfRoutingModule } from "./display-pdf-routing.module";
6 | import { ViewPdfComponent } from "./view-pdf/view-pdf.component";
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | DisplayPdfRoutingModule
12 | ],
13 | declarations: [ViewPdfComponent],
14 | providers: [DownloadPdfDataService]
15 | })
16 | export class DisplayPdfModule { }
17 |
--------------------------------------------------------------------------------
/src/app/custom-two-way-data-binding/child/child.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-child",
5 | templateUrl: "./child.component.html",
6 | styleUrls: ["./child.component.css"]
7 | })
8 | export class ChildComponent implements OnInit {
9 |
10 | @Input() amount = 0;
11 | @Output() amountChange = new EventEmitter();
12 |
13 | constructor() { }
14 |
15 | ngOnInit() {
16 | }
17 |
18 | withdraw() {
19 | this.amount -= 100;
20 | this.amountChange.emit(this.amount);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/browser-storage-sample/browser-storage-sample.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { BrowserStorageSampleRoutingModule } from "./browser-storage-sample-routing.module";
5 | import { BrowserStorageSampleTestComponent } from "./browser-storage-sample-test/browser-storage-sample-test.component";
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | BrowserStorageSampleRoutingModule
11 | ],
12 | declarations: [BrowserStorageSampleTestComponent]
13 | })
14 | export class BrowserStorageSampleModule { }
15 |
--------------------------------------------------------------------------------
/src/app/autocomplete/autocomplete.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from "@angular/common";
2 | import { NgModule } from "@angular/core";
3 |
4 | import { AutocompleteRoutingModule } from "./autocomplete-routing.module";
5 | import { AutocompleteSampleComponent } from "./autocomplete-sample/autocomplete-sample.component";
6 | import { SearchService } from "./search.service";
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | AutocompleteRoutingModule
12 | ],
13 | declarations: [AutocompleteSampleComponent],
14 | providers: [SearchService]
15 | })
16 | export class AutocompleteModule { }
17 |
--------------------------------------------------------------------------------
/src/app/using-third-party-libraries/typed-sha/typed-sha.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 | import * as jsSHA from "jssha";
3 |
4 | @Component({
5 | selector: "app-typed-sha",
6 | templateUrl: "./typed-sha.component.html",
7 | styleUrls: ["./typed-sha.component.css"]
8 | })
9 | export class TypedShaComponent implements OnInit {
10 | hash: string | null = null;
11 |
12 | constructor() { }
13 |
14 | ngOnInit() {
15 | const shaObj = new jsSHA("SHA-512", "TEXT");
16 | shaObj.update("This is a test");
17 | this.hash = shaObj.getHash("HEX");
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/using-third-party-libraries/untyped-sha/untyped-sha.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 |
3 | declare var jsSHA: any;
4 |
5 | @Component({
6 | selector: "app-untyped-sha",
7 | templateUrl: "./untyped-sha.component.html",
8 | styleUrls: ["./untyped-sha.component.css"]
9 | })
10 | export class UntypedShaComponent implements OnInit {
11 | hash: String | null = null;
12 |
13 | constructor() { }
14 |
15 | ngOnInit() {
16 | const shaObj = new jsSHA("SHA-512", "TEXT");
17 | shaObj.update("This is a test");
18 | this.hash = shaObj.getHash("HEX");
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/custom-two-way-data-binding/custom-two-way-data-binding.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { CustomTwoWayDataBindingRoutingModule } from "./custom-two-way-data-binding-routing.module";
5 | import { ParentComponent } from "./parent/parent.component";
6 | import { ChildComponent } from "./child/child.component";
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | CustomTwoWayDataBindingRoutingModule
12 | ],
13 | declarations: [ParentComponent, ChildComponent]
14 | })
15 | export class CustomTwoWayDataBindingModule { }
16 |
--------------------------------------------------------------------------------
/src/app/custom-two-way-data-binding/parent/parent.component.html:
--------------------------------------------------------------------------------
1 | Custom two way data binding
2 | 3 |
4 |
18 |
--------------------------------------------------------------------------------
/src/app/using-third-party-libraries/using-third-party-libraries.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { UsingThirdPartyLibrariesRoutingModule } from "./using-third-party-libraries-routing.module";
5 | import { TypedShaComponent } from "./typed-sha/typed-sha.component";
6 | import { UntypedShaComponent } from "./untyped-sha/untyped-sha.component";
7 |
8 | @NgModule({
9 | imports: [CommonModule, UsingThirdPartyLibrariesRoutingModule],
10 | declarations: [TypedShaComponent, UntypedShaComponent]
11 | })
12 | export class UsingThirdPartyLibrariesModule {}
13 |
--------------------------------------------------------------------------------
/src/app/modal-bootstrap-dialogs/modal-bootstrap-dialogs.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from "@angular/common";
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 |
5 | import { ModalBootstrapDialogsRoutingModule } from "./modal-bootstrap-dialogs-routing.module";
6 | import { ModalDialogTestComponent } from "./modal-dialog-test/modal-dialog-test.component";
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | FormsModule,
12 | ModalBootstrapDialogsRoutingModule
13 | ],
14 | declarations: [ModalDialogTestComponent]
15 | })
16 | export class ModalBootstrapDialogsModule { }
17 |
--------------------------------------------------------------------------------
/Controllers/MomentJalaaliController.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using Microsoft.AspNetCore.Mvc;
4 |
5 | namespace AngularTemplateDrivenFormsLab.Controllers
6 | {
7 | [Route("api/[controller]")]
8 | public class MomentJalaaliController : Controller
9 | {
10 | [HttpGet("[action]")]
11 | public IActionResult GetDates()
12 | {
13 | var dates = new List
5 |
7 | Parnet Component
6 |
8 | {{amount}}
9 |
10 |
17 |
11 |
12 |
13 |
14 |
15 |
16 | Display PDF Files
2 | 3 |
4 |
5 |
6 |
7 |
8 |
17 |
--------------------------------------------------------------------------------
/Models/Movie.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.ComponentModel.DataAnnotations;
3 |
4 | namespace AngularTemplateDrivenFormsLab.Models
5 | {
6 | public class Movie
7 | {
8 | public int Id { get; set; }
9 |
10 | [Required(ErrorMessage = "Movie Title is Required")]
11 | [MinLength(3, ErrorMessage = "Movie Title must be at least 3 characters")]
12 | public string Title { get; set; }
13 |
14 | [Required(ErrorMessage = "Movie Director is Required.")]
15 | public string Director { get; set; }
16 |
17 | [Range(0, 100, ErrorMessage = "Ticket price must be between 0 and 100.")]
18 | public decimal TicketPrice { get; set; }
19 |
20 | [Required(ErrorMessage = "Movie Release Date is required")]
21 | public DateTime ReleaseDate { get; set; }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/custom-validators/email-validator.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from "@angular/core";
2 | import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from "@angular/forms";
3 |
4 | @Directive({
5 | selector:
6 | "[appEmailValidator][formControlName],[appEmailValidator][formControl],[appEmailValidator][ngModel]",
7 | providers: [
8 | {
9 | provide: NG_VALIDATORS,
10 | useExisting: EmailValidatorDirective,
11 | multi: true
12 | }
13 | ]
14 | })
15 | export class EmailValidatorDirective implements Validator {
16 | validate(element: AbstractControl): ValidationErrors | null {
17 | const emailRegex = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
18 | const valid = emailRegex.test(element.value);
19 | return valid ? null : { appEmailValidator: true };
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Hosting;
6 | using Microsoft.Extensions.Configuration;
7 | using Microsoft.Extensions.Hosting;
8 | using Microsoft.Extensions.Logging;
9 |
10 | namespace AngularTemplateDrivenFormsLab
11 | {
12 | public class Program
13 | {
14 | public static void Main(string[] args)
15 | {
16 | CreateHostBuilder(args).Build().Run();
17 | }
18 |
19 | public static IHostBuilder CreateHostBuilder(string[] args) =>
20 | Host.CreateDefaultBuilder(args)
21 | .ConfigureWebHostDefaults(webBuilder =>
22 | {
23 | webBuilder.UseStartupusing iframe
9 | 10 |using object
11 | 13 |usin embed
14 |Browser storage sample
2 |
3 |
4 |
5 |
9 |
10 |
6 | {{fromSessionStorage}}
7 |
8 |
11 |
12 |
13 |
17 |
--------------------------------------------------------------------------------
/src/app/custom-validators/custom-validators.module.ts:
--------------------------------------------------------------------------------
1 | import { FormsModule } from "@angular/forms";
2 | import { NgModule } from "@angular/core";
3 | import { CommonModule } from "@angular/common";
4 |
5 | import { CustomValidatorsRoutingModule } from "./custom-validators-routing.module";
6 | import { UserRegisterComponent } from "./user-register/user-register.component";
7 | import { EqualValidatorDirective } from "./equal-validator.directive";
8 | import { EmailValidatorDirective } from "./email-validator.directive";
9 | import { RemoteValidatorDirective } from "./remote-validator.directive";
10 |
11 | @NgModule({
12 | imports: [CommonModule, FormsModule, CustomValidatorsRoutingModule],
13 | declarations: [
14 | UserRegisterComponent,
15 | EqualValidatorDirective,
16 | EmailValidatorDirective,
17 | RemoteValidatorDirective
18 | ]
19 | })
20 | export class CustomValidatorsModule {}
21 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | /*
4 | .ng-touched.ng-invalid{
5 | border: 1px solid red;
6 | }
7 | */
8 |
9 | /* Spinner */
10 | .spinner {
11 | font-size:15px;
12 | z-index:10
13 | }
14 |
15 | .glyphicon-spin {
16 | -webkit-animation: spin 1000ms infinite linear;
17 | animation: spin 1000ms infinite linear;
18 | }
19 | @-webkit-keyframes spin {
20 | 0% {
21 | -webkit-transform: rotate(0deg);
22 | transform: rotate(0deg);
23 | }
24 | 100% {
25 | -webkit-transform: rotate(359deg);
26 | transform: rotate(359deg);
27 | }
28 | }
29 | @keyframes spin {
30 | 0% {
31 | -webkit-transform: rotate(0deg);
32 | transform: rotate(0deg);
33 | }
34 | 100% {
35 | -webkit-transform: rotate(359deg);
36 | transform: rotate(359deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/service-component-communication/second/second.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from "@angular/core";
2 | import { Subscription } from "rxjs";
3 |
4 | import { SampleService } from "./../sample.service";
5 |
6 | @Component({
7 | selector: "app-second",
8 | templateUrl: "./second.component.html",
9 | styleUrls: ["./second.component.css"]
10 | })
11 | export class SecondComponent implements OnInit, OnDestroy {
12 |
13 | message: string | null = null;
14 | sampleSubscription: Subscription | null = null;
15 |
16 | constructor(private sampleService: SampleService) { }
17 |
18 | ngOnInit() {
19 | this.sampleSubscription = this.sampleService.telecast$.subscribe(message => {
20 | this.message = message;
21 | });
22 | }
23 |
24 | ngOnDestroy() {
25 | if (this.sampleSubscription) {
26 | this.sampleSubscription.unsubscribe();
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/injection-beyond-classes/test-providers/test-providers.component.html:
--------------------------------------------------------------------------------
1 |
14 | {{fromLocalStorage}}
15 |
16 | 2 | Injection Beyond Classes 3 |
4 |
5 |
20 | -
6 |
- API_BASE_HREF: {{apiBaseHref}} 7 |
- APP_BASE_HREF: {{appBaseHref}} 8 |
- IS_PROD: {{isProd}} 9 |
- APIKey: {{apiKey}} 10 |
- Random-1: {{random}} 11 |
- Random-2: {{random}} 12 |
- emailApiConfig {{emailApiConfig | json}} 13 |
- languages: {{languages | json}} 14 |
- config: {{config | json}} 15 |
- baseUrl: {{baseUrl}} 16 |
- randomFactory-1: {{randomFactory}} 17 |
- randomFactory-2: {{randomFactory}} 18 |
21 |
22 | randomFactory: {{fromRandomFactory}}
23 |
24 |
--------------------------------------------------------------------------------
/src/app/upload-file/upload-file-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { UploadFileWithProgressBarComponent } from "./upload-file-with-progress-bar/upload-file-with-progress-bar.component";
2 | import { Ng2FileUploadTestComponent } from "./ng2-file-upload-test/ng2-file-upload-test.component";
3 | import { UploadFileSimpleComponent } from "./upload-file-simple/upload-file-simple.component";
4 | import { NgModule } from "@angular/core";
5 | import { Routes, RouterModule } from "@angular/router";
6 |
7 | const routes: Routes = [
8 | { path: "uploadFileSimple", component: UploadFileSimpleComponent },
9 | { path: "ng2FileUploadTest", component: Ng2FileUploadTestComponent },
10 | {
11 | path: "uploadFileWithProgressBar",
12 | component: UploadFileWithProgressBarComponent
13 | }
14 | ];
15 |
16 | @NgModule({
17 | imports: [RouterModule.forChild(routes)],
18 | exports: [RouterModule]
19 | })
20 | export class UploadFileRoutingModule {}
21 |
--------------------------------------------------------------------------------
/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:45225",
7 | "sslPort": 44381
8 | }
9 | },
10 | "profiles": {
11 | "IIS Express": {
12 | "commandName": "IISExpress",
13 | "launchBrowser": true,
14 | "environmentVariables": {
15 | "ASPNETCORE_ENVIRONMENT": "Development"
16 | }
17 | },
18 | "ASPNETCoreIdentitySample": {
19 | "commandName": "Project",
20 | "launchBrowser": true,
21 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
22 | "environmentVariables": {
23 | "ASPNETCORE_ENVIRONMENT": "Development"
24 | }
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/src/app/service-component-communication/third/third.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from "@angular/core";
2 | import { Subscription } from "rxjs";
3 |
4 | import { SampleService } from "./../sample.service";
5 |
6 | @Component({
7 | selector: "app-third",
8 | templateUrl: "./third.component.html",
9 | styleUrls: ["./third.component.css"]
10 | })
11 | export class ThirdComponent implements OnInit, OnDestroy {
12 |
13 | message: string | null = null;
14 | sampleSubscription: Subscription | null = null;
15 |
16 | constructor(private sampleService: SampleService) { }
17 |
18 | ngOnInit() {
19 | }
20 |
21 | subscribe() {
22 | this.sampleSubscription = this.sampleService.telecast$.subscribe(message => {
23 | this.message = message;
24 | });
25 | }
26 |
27 | ngOnDestroy() {
28 | if (this.sampleSubscription) {
29 | this.sampleSubscription.unsubscribe();
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/service-component-communication/service-component-communication.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from "@angular/common";
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 |
5 | import { FinalComponent } from "./final/final.component";
6 | import { FirstComponent } from "./first/first.component";
7 | import { SampleService } from "./sample.service";
8 | import { SecondComponent } from "./second/second.component";
9 | import { ServiceComponentCommunicationRoutingModule } from "./service-component-communication-routing.module";
10 | import { ThirdComponent } from "./third/third.component";
11 |
12 | @NgModule({
13 | imports: [
14 | CommonModule,
15 | FormsModule,
16 | ServiceComponentCommunicationRoutingModule
17 | ],
18 | declarations: [FirstComponent, SecondComponent, FinalComponent, ThirdComponent],
19 | providers: [SampleService]
20 | })
21 | export class ServiceComponentCommunicationModule { }
22 |
--------------------------------------------------------------------------------
/src/app/core/app-config.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from "@angular/common/http";
2 | import { Injectable } from "@angular/core";
3 |
4 | @Injectable()
5 | export class AppConfigService {
6 |
7 | private config: AppConfig | null = null;
8 |
9 | constructor(private http: HttpClient) { }
10 |
11 | loadClientConfig(): Promise
2 |
24 |
--------------------------------------------------------------------------------
/AngularTemplateDrivenFormsLab.sln:
--------------------------------------------------------------------------------
1 |
2 | Microsoft Visual Studio Solution File, Format Version 12.00
3 | # Visual Studio 15
4 | VisualStudioVersion = 15.0.26228.4
5 | MinimumVisualStudioVersion = 10.0.40219.1
6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "AngularTemplateDrivenFormsLab", "AngularTemplateDrivenFormsLab.csproj", "{F2E13031-ADC5-4024-BB4F-91FF7CCB7113}"
7 | EndProject
8 | Global
9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
10 | Debug|Any CPU = Debug|Any CPU
11 | Release|Any CPU = Release|Any CPU
12 | EndGlobalSection
13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
14 | {F2E13031-ADC5-4024-BB4F-91FF7CCB7113}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15 | {F2E13031-ADC5-4024-BB4F-91FF7CCB7113}.Debug|Any CPU.Build.0 = Debug|Any CPU
16 | {F2E13031-ADC5-4024-BB4F-91FF7CCB7113}.Release|Any CPU.ActiveCfg = Release|Any CPU
17 | {F2E13031-ADC5-4024-BB4F-91FF7CCB7113}.Release|Any CPU.Build.0 = Release|Any CPU
18 | EndGlobalSection
19 | GlobalSection(SolutionProperties) = preSolution
20 | HideSolutionNode = FALSE
21 | EndGlobalSection
22 | EndGlobal
23 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/Controllers/TypeaheadController.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Linq;
3 | using System.Threading.Tasks;
4 | using Microsoft.AspNetCore.Mvc;
5 |
6 | namespace AngularTemplateDrivenFormsLab.Controllers
7 | {
8 | [Route("api/[controller]")]
9 | public class TypeaheadController : Controller
10 | {
11 | [HttpGet("[action]")]
12 | public async TaskSupport Form (simple upload)
3 | 23 |
2 | 
6 |
7 |
--------------------------------------------------------------------------------
/src/app/modal-bootstrap-dialogs/modal-dialog-test/modal-dialog-test.component.html:
--------------------------------------------------------------------------------
1 | 3 | Welcome works! 4 |
5 |
6 | Displaying modal bootstrap dialogs
2 | 3 | 4 | 5 |
7 |
12 | Modal
8 | 11 |
13 | This is a modal.
14 |
27 |
28 | {{confirmResult}}
32 |
--------------------------------------------------------------------------------
/src/app/custom-pipe/moment-jalaali-test/moment-jalaali-test.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 | import * as momentJalaali from "moment-jalaali";
3 |
4 | import { JsonDatesService } from "./../json-dates.service";
5 |
6 | @Component({
7 | selector: "app-moment-jalaali-test",
8 | templateUrl: "./moment-jalaali-test.component.html",
9 | styleUrls: ["./moment-jalaali-test.component.css"]
10 | })
11 | export class MomentJalaaliTestComponent implements OnInit {
12 | now: string | null = null;
13 | nowLongDateFormat: string | null = null;
14 | nowExtraLongDateFormat: string | null = null;
15 | dates: any[] = [];
16 |
17 | constructor(private jsonDatesService: JsonDatesService) { }
18 |
19 | ngOnInit() {
20 | this.persianDateTests();
21 |
22 | this.jsonDatesService.getDates().subscribe(data => {
23 | this.dates = data;
24 | });
25 | }
26 |
27 | persianDateTests() {
28 | // https://github.com/jalaali/moment-jalaali
29 | momentJalaali.loadPersian(/*{ usePersianDigits: true }*/); // نمايش فارسى نام ماهها، روزها و امثال آن
30 |
31 | this.now = momentJalaali().format("jYYYY/jMM/jDD HH:mm");
32 | this.nowLongDateFormat = momentJalaali().format("jD jMMMM jYYYY [ساعت] LT");
33 | this.nowExtraLongDateFormat = momentJalaali().format(
34 | "dddd، jD jMMMM jYYYY [ساعت] LT"
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "strict": true, /* Enable all strict type-checking options. */
11 | "noImplicitReturns": true,
12 | "allowUnreachableCode": false,
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "suppressExcessPropertyErrors": false,
16 | "noImplicitThis": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "strictFunctionTypes": true,
19 | "suppressImplicitAnyIndexErrors": false,
20 | "alwaysStrict": true,
21 | "noImplicitAny": true,
22 | "strictNullChecks": true,
23 | "target": "es5",
24 | "typeRoots": [
25 | "node_modules/@types"
26 | ],
27 | "lib": [
28 | "es2016",
29 | "dom"
30 | ],
31 | "baseUrl": "src",
32 | "paths": {
33 | "@app/*": [
34 | "app/*"
35 | ],
36 | "@app/core/*": [
37 | "app/core/*"
38 | ],
39 | "@app/shared/*": [
40 | "app/shared/*"
41 | ],
42 | "@env/*": [
43 | "environments/*"
44 | ]
45 | }
46 | },
47 | "angularCompilerOptions": {
48 | "fullTemplateTypeCheck": true,
49 | "preserveWhiteSpace": false
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/Controllers/EmployeeController.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Mvc;
2 | using AngularTemplateDrivenFormsLab.Models;
3 | using System;
4 |
5 | namespace AngularTemplateDrivenFormsLab.Controllers
6 | {
7 | [Route("api/[controller]")]
8 | public class EmployeeController : Controller
9 | {
10 | public IActionResult Post([FromBody] Employee model)
11 | {
12 | //todo: save model
13 |
14 | model.Id = 100;
15 | return Created("", new { fields = model });
16 | }
17 |
18 | [HttpGet("/api/[controller]/[action]")]
19 | public IActionResult Languages()
20 | {
21 | string[] languages = { "Persian", "English", "Spanish", "Other" };
22 | return Ok(languages);
23 | }
24 |
25 | [HttpPost("[action]")]
26 | [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
27 | public IActionResult CheckUser([FromBody] Employee model)
28 | {
29 | var remoteValidationResult = new { result = true, message = $"{model.FirstName} is fine!" };
30 | if (model.FirstName?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
31 | {
32 | remoteValidationResult = new { result = false, message = "username:`Vahid` is already taken." };
33 | }
34 |
35 | return Json(remoteValidationResult);
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/product/product-group/product-group.component.html:
--------------------------------------------------------------------------------
1 |
2 |
30 |
--------------------------------------------------------------------------------
/src/app/timers/using-timers/using-timers.component.html:
--------------------------------------------------------------------------------
1 | Cascading Drop-down Lists
3 | 29 |2 | Using timers 3 |
4 | 5 |
6 |
19 |
20 |
7 |
9 | Observable.interval(1000)
8 |
10 |
18 |
11 | {{intervalValue}}
12 |
13 |
14 |
15 |
16 |
17 |
21 |
33 |
34 |
22 |
24 | Countdown timer
23 |
25 |
32 |
26 | {{countdown}}
27 |
28 |
29 |
30 |
31 |
35 |
49 |
--------------------------------------------------------------------------------
/src/app/upload-file/upload-file-simple.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient, HttpErrorResponse, HttpHeaders } from "@angular/common/http";
2 | import { Injectable } from "@angular/core";
3 | import { Observable, throwError as observableThrowError } from "rxjs";
4 | import { catchError, map } from "rxjs/operators";
5 |
6 | import { Ticket } from "./ticket";
7 |
8 |
9 | @Injectable()
10 | export class UploadFileSimpleService {
11 | private baseUrl = "api/SimpleUpload";
12 |
13 | constructor(private http: HttpClient) { }
14 |
15 | postTicket(ticket: Ticket, filesList: FileList): Observable
36 |
38 | Ticker
37 |
39 |
48 |
40 | {{tick}}
41 |
42 |
43 |
44 |
45 |
46 |
47 | 2 | Autocomplete 3 |
4 |
5 |
18 |
19 |
20 |
6 |
8 | Using flatMap
7 |
9 |
10 |
11 |
17 | -
12 |
- 13 | {{country}} 14 | 15 |
21 |
34 |
35 |
22 |
24 | Using switchMap
23 |
25 |
26 |
27 |
33 | -
28 |
- 29 | {{country}} 30 | 31 |
36 |
49 |
--------------------------------------------------------------------------------
/Utils/AngularPushStateRoutingMiddleware.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.IO;
3 | using System.Threading.Tasks;
4 | using Microsoft.AspNetCore.Builder;
5 | using Microsoft.AspNetCore.Http;
6 |
7 | namespace AngularTemplateDrivenFormsLab.Utils
8 | {
9 | public class AngularPushStateRoutingMiddleware
10 | {
11 | private readonly RequestDelegate _next;
12 |
13 | public AngularPushStateRoutingMiddleware(RequestDelegate next)
14 | {
15 | _next = next;
16 | }
17 |
18 | public async Task Invoke(HttpContext context)
19 | {
20 | await _next(context);
21 | var requestPath = context.Request.Path.Value;
22 | if (requestPath != null &&
23 | context.Response.StatusCode == 404 &&
24 | !Path.HasExtension(requestPath) &&
25 | !requestPath.StartsWith("/api/", StringComparison.OrdinalIgnoreCase))
26 | {
27 | //context.Request.Path = "/index.html";
28 | context.Request.Path = "/"; // since we are using views/shared/_layout.cshtml now.
29 | context.Response.StatusCode = 200;
30 | await _next(context);
31 | }
32 | }
33 | }
34 |
35 | public static class AngularPushStateRoutingMiddlewareExtensions
36 | {
37 | public static IApplicationBuilder UseAngularPushStateRouting(this IApplicationBuilder builder)
38 | {
39 | return builder.UseMiddleware
37 |
39 | Normal debounceTime
38 |
40 |
41 |
42 |
48 | -
43 |
- 44 | {{country}} 45 | 46 |
2 |
59 |
--------------------------------------------------------------------------------
/Startup.cs:
--------------------------------------------------------------------------------
1 | using AngularTemplateDrivenFormsLab.Utils;
2 | using Microsoft.AspNetCore.Builder;
3 | using Microsoft.AspNetCore.Hosting;
4 | using Microsoft.AspNetCore.Mvc;
5 | using Microsoft.AspNetCore.StaticFiles;
6 | using Microsoft.Extensions.Configuration;
7 | using Microsoft.Extensions.DependencyInjection;
8 | using Microsoft.Extensions.Hosting;
9 |
10 | namespace AngularTemplateDrivenFormsLab
11 | {
12 | public class Startup
13 | {
14 | public Startup(IConfiguration configuration)
15 | {
16 | Configuration = configuration;
17 | }
18 |
19 | public IConfiguration Configuration { get; }
20 |
21 | public void ConfigureServices(IServiceCollection services)
22 | {
23 | services.AddAntiforgery(x => x.HeaderName = "X-XSRF-TOKEN");
24 | services.AddMvc(options =>
25 | {
26 | options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
27 | });
28 | }
29 |
30 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
31 | {
32 | if (env.IsDevelopment())
33 | {
34 | app.UseDeveloperExceptionPage();
35 | }
36 | else
37 | {
38 | app.UseExceptionHandler("/Home/Error");
39 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
40 | app.UseHsts();
41 | }
42 | app.UseHttpsRedirection();
43 |
44 | app.UseContentSecurityPolicy();
45 | app.UseAngularAntiforgeryToken();
46 | app.UseAngularPushStateRouting(); // or just use `routes.MapSpaFallbackRoute` after the `default` route.
47 |
48 | app.UseRouting();
49 |
50 | app.UseAuthorization();
51 |
52 | app.UseEndpoints(endpoints =>
53 | {
54 | endpoints.MapControllerRoute(
55 | name: "default",
56 | pattern: "{controller=Home}/{action=Index}/{id?}");
57 | });
58 |
59 | var provider = new FileExtensionContentTypeProvider();
60 | app.UseStaticFiles(new StaticFileOptions
61 | {
62 | ContentTypeProvider = provider
63 | });
64 | app.UseDefaultFiles();
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/app/autocomplete/autocomplete-sample/autocomplete-sample.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 | import { debounceTime, distinctUntilChanged, flatMap, switchMap } from "rxjs/operators";
3 | import { Subject } from "rxjs";
4 |
5 | import { SearchService } from "./../search.service";
6 |
7 | @Component({
8 | selector: "app-autocomplete-sample",
9 | templateUrl: "./autocomplete-sample.component.html",
10 | styleUrls: ["./autocomplete-sample.component.css"]
11 | })
12 | export class AutocompleteSampleComponent implements OnInit {
13 |
14 | countries1: string[] = [];
15 | countries2: string[] = [];
16 | countries3: string[] = [];
17 |
18 | private model1Changed: SubjectUpload File With ProgressBar Using HttpClient
3 | 58 |
2 |
76 |
77 |
--------------------------------------------------------------------------------
/src/app/model-state-validation/model-state-validation-test/model-state-validation-test.component.html:
--------------------------------------------------------------------------------
1 | Support Form(ng2-file-upload)
3 | 75 |76 |
2 | Displaying ASP.NET Core ModelState validation errors 3 |
4 | 43 | 44 |
46 |
62 |
47 | This field is required.
48 |
49 |
50 | This field should be minimum {{ctrl.errors.minlength.requiredLength}} characters.
51 |
52 |
53 | This field should be max {{ctrl.errors.maxlength.requiredLength}} characters.
54 |
55 |
56 | This field's pattern: {{ctrl.errors.pattern.requiredPattern}}
57 |
58 |
59 | {{ctrl.errors.modelStateError.error}}
60 |
61 |