4
3 |
4 | 4
5 |
6 | Ooops! Page Not Found
7 |
9 | Let's go home and try from there.
8 |Welcome!
10 |
11 | About
12 |
13 |
14 | Contacts
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Intro to Angular and TypeScript/resources.md:
--------------------------------------------------------------------------------
1 | OSI model: https://www.geeksforgeeks.org/layers-of-osi-model/
2 |
3 | HTTP :https://dev.to/accreditly/http1-vs-http2-vs-http3-2k1c
4 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Router, RouterModule, Routes } from '@angular/router';
3 | import { TodoListComponent } from './todo/todo-list/todo-list.component';
4 |
5 | export const routes: Routes = [
6 | {
7 | path: '',
8 | pathMatch: 'full',
9 | redirectTo: 'user/list',
10 | },
11 | {
12 | path: 'todo-list',
13 | component: TodoListComponent,
14 | },
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forRoot(routes)],
19 | exports: [RouterModule],
20 | })
21 | export class AppRoutingModule {}
22 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Modules and Routing/modules-and-routing/src/app/app.component.css
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | 4 |
2 |
4 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/global-loader/global-loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { GlobalLoaderService } from './global-loader.service';
3 |
4 | @Component({
5 | selector: 'app-global-loader',
6 | templateUrl: './global-loader.component.html',
7 | styleUrls: ['./global-loader.component.css'],
8 | })
9 | export class GlobalLoaderComponent {
10 | constructor(public globalLoaderService: GlobalLoaderService) {}
11 | }
12 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/global-loader/global-loader.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { GlobalLoaderService } from './global-loader.service';
4 |
5 | describe('GlobalLoaderService', () => {
6 | let service: GlobalLoaderService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(GlobalLoaderService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/global-loader/global-loader.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root',
5 | })
6 | export class GlobalLoaderService {
7 | isHidden: boolean = true;
8 |
9 | showLoader() {
10 | this.isHidden = false;
11 | }
12 |
13 | hideLoader() {
14 | this.isHidden = true;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/navigation/navigation.component.css:
--------------------------------------------------------------------------------
1 | .nav-btn {
2 | margin: 10px;
3 | padding: 20px;
4 | border: 1px solid #000;
5 | border-radius: 20px;
6 | cursor: pointer;
7 | width: fit-content;
8 | }
9 |
10 | .nav-btn:hover {
11 | background-color: gray;
12 | color: #fff;
13 | }
14 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/navigation/navigation.component.html:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/core/navigation/navigation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-navigation',
6 | templateUrl: './navigation.component.html',
7 | styleUrls: ['./navigation.component.css'],
8 | })
9 | export class NavigationComponent {
10 | constructor(private router: Router) {}
11 |
12 | navigateTo(path: string): void {
13 | this.router.navigate([path]);
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { SpinnerComponent } from './spinner/spinner.component';
4 |
5 | @NgModule({
6 | declarations: [SpinnerComponent],
7 | imports: [CommonModule],
8 | exports: [SpinnerComponent],
9 | })
10 | export class SharedModule {}
11 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/shared/spinner/spinner.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/shared/spinner/spinner.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-spinner',
5 | templateUrl: './spinner.component.html',
6 | styleUrls: ['./spinner.component.css'],
7 | })
8 | export class SpinnerComponent {}
9 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/todo/todo-list/todo-list.component.css:
--------------------------------------------------------------------------------
1 | .todo-wrapper {
2 | width: 80%;
3 | height: 120px;
4 | border-radius: 20px;
5 | border: 1px solid #000;
6 | padding: 20px;
7 | margin: 20px;
8 | }
9 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/todo/todo-list/todo-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/todo/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-todo-list',
5 | templateUrl: './todo-list.component.html',
6 | styleUrls: ['./todo-list.component.css'],
7 | })
8 | export class TodoListComponent {}
9 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/todo/todo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { TodoListComponent } from './todo-list/todo-list.component';
4 |
5 | @NgModule({
6 | declarations: [TodoListComponent],
7 | imports: [CommonModule],
8 | exports: [TodoListComponent],
9 | })
10 | export class TodoModule {}
11 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/types/User.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | id: number;
3 | username: string;
4 | }
5 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/user/user-detail/user-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Modules and Routing/modules-and-routing/src/app/user/user-detail/user-detail.component.css
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/user/user-detail/user-detail.component.html:
--------------------------------------------------------------------------------
1 | todo-list works!
3 |user-detail works!
2 | -------------------------------------------------------------------------------- /Modules and Routing/modules-and-routing/src/app/user/user-detail/user-detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-user-detail', 6 | templateUrl: './user-detail.component.html', 7 | styleUrls: ['./user-detail.component.css'], 8 | }) 9 | export class UserDetailComponent { 10 | constructor(private activeRoute: ActivatedRoute) { 11 | // static way 12 | console.log('snapshot.data', this.activeRoute.snapshot.data['user']); 13 | 14 | // dynamic way 15 | this.activeRoute.params.subscribe((v) => 16 | console.log('params.subscribe', v) 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Modules and Routing/modules-and-routing/src/app/user/user-list/user-list.component.css: -------------------------------------------------------------------------------- 1 | .user-list-wraper { 2 | display: flex; 3 | justify-content: center; 4 | flex-direction: column; 5 | align-items: center; 6 | padding: 20px; 7 | } 8 | 9 | .clickable { 10 | cursor: pointer; 11 | background-color: aliceblue; 12 | } 13 | -------------------------------------------------------------------------------- /Modules and Routing/modules-and-routing/src/app/user/user-list/user-list.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
10 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/user/user.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { UserService } from './user.service';
4 |
5 | describe('UserService', () => {
6 | let service: UserService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(UserService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/Modules and Routing/modules-and-routing/src/app/user/user.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { User } from '../types/User';
4 |
5 | @Injectable({
6 | providedIn: 'root',
7 | })
8 | export class UserService {
9 | constructor(private http: HttpClient) {}
10 |
11 | fetchUsers() {
12 | return this.http.get
7 |
9 | {{ user.id }} | {{ user.username }}
8 |3 |
4 | {{ counter$ | async }}
5 |
6 |
7 |
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/Q&A/q-and-a-app/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { increment, setValue } from './store/action';
4 | import { getCounter } from './store/selector';
5 |
6 | @Component({
7 | selector: 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css'],
10 | })
11 | export class AppComponent {
12 | counter$ = this.store.select(getCounter);
13 |
14 | constructor(private store: Store) {}
15 |
16 | incrementHandler() {
17 | this.store.dispatch(increment());
18 | }
19 |
20 | setValueHandler(value: number) {
21 | this.store.dispatch(setValue({ counter: value }));
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/Q&A/q-and-a-app/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 | import { YourComponent } from './your/your.component';
7 | import { StoreModule } from '@ngrx/store';
8 | import { reducers } from './store';
9 |
10 | @NgModule({
11 | declarations: [AppComponent, YourComponent],
12 | imports: [BrowserModule, AppRoutingModule, StoreModule.forRoot(reducers)],
13 | providers: [],
14 | bootstrap: [AppComponent],
15 | })
16 | export class AppModule {}
17 |
--------------------------------------------------------------------------------
/Q&A/q-and-a-app/src/app/popup.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { PopupService } from './popup.service';
4 |
5 | describe('PopupService', () => {
6 | let service: PopupService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(PopupService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/Q&A/q-and-a-app/src/app/popup.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs';
3 |
4 | @Injectable({
5 | providedIn: 'root',
6 | })
7 | export class PopupService {
8 | confirm(msg: string) {
9 | const userChoice = window.confirm(msg);
10 |
11 | return Observable.create((observer: any) => {
12 | observer.next(userChoice);
13 | observer.complete();
14 | });
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/Q&A/q-and-a-app/src/app/store/action.ts:
--------------------------------------------------------------------------------
1 | import { createAction, props } from '@ngrx/store';
2 | import { MainState } from '.';
3 |
4 | // action type
5 | const actionType = {
6 | increment: 'INCREMENT', // UNIQUE! ADD PREFIX
7 | setValue: 'SET_VALUE',
8 | };
9 |
10 | export const increment = createAction(actionType.increment);
11 | export const setValue = createAction(actionType.setValue, propsyour works!
2 | 3 | -------------------------------------------------------------------------------- /Q&A/q-and-a-app/src/app/your/your.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { YourComponent } from './your.component'; 4 | 5 | describe('YourComponent', () => { 6 | let component: YourComponent; 7 | let fixture: ComponentFixture
2 |
5 |
--------------------------------------------------------------------------------
/Workshop Components/components-workshop/src/app/main/main.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MainComponent } from './main.component';
4 |
5 | describe('MainComponent', () => {
6 | let component: MainComponent;
7 | let fixture: ComponentFixtureLoading...
2 |
--------------------------------------------------------------------------------
/Workshop Components/components-workshop/src/app/shared/loader/loader.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoaderComponent } from './loader.component';
4 |
5 | describe('LoaderComponent', () => {
6 | let component: LoaderComponent;
7 | let fixture: ComponentFixture
2 |
5 |
--------------------------------------------------------------------------------
/Workshop Forms/workshop-forms/src/app/main/main.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MainComponent } from './main.component';
4 |
5 | describe('MainComponent', () => {
6 | let component: MainComponent;
7 | let fixture: ComponentFixtureLoading...
2 |
--------------------------------------------------------------------------------
/Workshop Forms/workshop-forms/src/app/shared/loader/loader.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoaderComponent } from './loader.component';
4 |
5 | describe('LoaderComponent', () => {
6 | let component: LoaderComponent;
7 | let fixture: ComponentFixture
2 |
5 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/main/main.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MainComponent } from './main.component';
4 |
5 | describe('MainComponent', () => {
6 | let component: MainComponent;
7 | let fixture: ComponentFixtureLoading...
2 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/shared/loader/loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-loader',
5 | templateUrl: './loader.component.html',
6 | styleUrls: ['./loader.component.css'],
7 | })
8 | export class LoaderComponent {}
9 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { LoaderComponent } from './loader/loader.component';
4 |
5 | @NgModule({
6 | declarations: [LoaderComponent],
7 | imports: [CommonModule],
8 | exports: [LoaderComponent],
9 | })
10 | export class SharedModule {}
11 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/theme/new-theme/new-theme.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-new-theme',
5 | templateUrl: './new-theme.component.html',
6 | styleUrls: ['./new-theme.component.css']
7 | })
8 | export class NewThemeComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/theme/theme.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { NewThemeComponent } from './new-theme/new-theme.component';
4 | import { CurrentThemeComponent } from './current-theme/current-theme.component';
5 | import { ThemeRoutingModule } from './theme-routing.module';
6 |
7 | @NgModule({
8 | declarations: [NewThemeComponent, CurrentThemeComponent],
9 | imports: [CommonModule, ThemeRoutingModule],
10 | })
11 | export class ThemeModule {}
12 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/types/post.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from './theme';
2 | import { UserId } from './user-id';
3 |
4 | export interface Post {
5 | likes: string[];
6 | _id: string;
7 | text: string;
8 | userId: UserId;
9 | themeId: Theme;
10 | created_at: string;
11 | updatedAt: string;
12 | __v: number;
13 | }
14 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/types/theme.ts:
--------------------------------------------------------------------------------
1 | import { Post } from './post';
2 | import { UserId } from './user-id';
3 |
4 | export interface Theme {
5 | subscribers: string[];
6 | posts: any; // string[] | Post[];
7 | _id: string;
8 | themeName: string;
9 | userId: UserId;
10 | created_at: string;
11 | updatedAt: string;
12 | __v: number;
13 | }
14 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/types/user-id.ts:
--------------------------------------------------------------------------------
1 | export interface UserId {
2 | themes: string[];
3 | posts: string[];
4 | _id: string;
5 | tel: string;
6 | email: string;
7 | username: string;
8 | password: string;
9 | created_at: string;
10 | updatedAt: string;
11 | __v: number;
12 | }
13 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/types/user.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | email: string;
3 | firstName: string;
4 | // phoneNumber: string;
5 | // password: string;
6 | }
7 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/user/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: ComponentFixture
2 |
20 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/user/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-profile',
5 | templateUrl: './profile.component.html',
6 | styleUrls: ['./profile.component.css']
7 | })
8 | export class ProfileComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/user/register/register.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-register',
5 | templateUrl: './register.component.html',
6 | styleUrls: ['./register.component.css']
7 | })
8 | export class RegisterComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { LoginComponent } from './login/login.component';
4 | import { RegisterComponent } from './register/register.component';
5 | import { ProfileComponent } from './profile/profile.component';
6 | import { UserRoutingModule } from './user-routing.module';
7 |
8 | @NgModule({
9 | declarations: [LoginComponent, RegisterComponent, ProfileComponent],
10 | imports: [CommonModule, UserRoutingModule],
11 | })
12 | export class UserModule {}
13 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/user/user.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { UserService } from './user.service';
4 |
5 | describe('UserService', () => {
6 | let service: UserService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(UserService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/app/welcome/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { UserService } from '../user/user.service';
3 |
4 | @Component({
5 | selector: 'app-welcome',
6 | templateUrl: './welcome.component.html',
7 | styleUrls: ['./welcome.component.css'],
8 | })
9 | export class WelcomeComponent {
10 | constructor(private userService: UserService) {}
11 |
12 | get isLogged(): boolean {
13 | return this.userService.isLogged;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/modules-and-routing-workshop/src/assets/.gitkeep
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/modules-and-routing-workshop/src/assets/profile.png
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/environments/environment.development.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | appUrl: 'http://localhost:3000/api',
3 | };
4 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | appUrl: 'http://localhost:3000/api', // domain -> will not be localhost in prod
3 | };
4 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/modules-and-routing-workshop/src/favicon.ico
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import { AppModule } from './app/app.module';
4 |
5 |
6 | platformBrowserDynamic().bootstrapModule(AppModule)
7 | .catch(err => console.error(err));
8 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/modules-and-routing-workshop/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "include": [
11 | "src/**/*.spec.ts",
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/posts.bson:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/resources/forum/posts.bson
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/posts.metadata.json:
--------------------------------------------------------------------------------
1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.posts"}],"uuid":"8e8754eadf90424aa5cf5d9e2bfbb48e"}
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/themes.bson:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/resources/forum/themes.bson
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/themes.metadata.json:
--------------------------------------------------------------------------------
1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.themes"}],"uuid":"a9e25cd8f9d44ee39d90dc2584bf437d"}
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/users.bson:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/resources/forum/users.bson
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/forum/users.metadata.json:
--------------------------------------------------------------------------------
1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.users"},{"v":2,"unique":true,"key":{"email":1},"name":"email_1","ns":"forum.users","background":true},{"v":2,"unique":true,"key":{"username":1},"name":"username_1","ns":"forum.users","background":true}],"uuid":"d1f59d47b68c427eb89196b588247543"}
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/views/theme-content/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/Workshop Modules and Routing/resources/views/theme-content/profile.png
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/views/theme-content/reset.css:
--------------------------------------------------------------------------------
1 | /*
2 | *Removes all default whitespace
3 | */
4 |
5 | * {
6 | padding: 0;
7 | margin: 0;
8 | }
9 |
10 | /*
11 | *Reset CSS model sizing calculations
12 | */
13 |
14 | html {
15 | box-sizing: border-box;
16 | }
17 |
18 | *, *:before, *:after {
19 | box-sizing: inherit;
20 | }
--------------------------------------------------------------------------------
/Workshop Modules and Routing/resources/views/theme-content/responsive.css:
--------------------------------------------------------------------------------
1 | @media (min-width: 800px) {
2 | html {
3 | font-size: 14px;
4 | }
5 | }
6 |
7 | @media (min-width: 1024px) {
8 | html {
9 | font-size: 16px;
10 | }
11 | }
12 |
13 | @media (min-width: 1280px) {
14 | html {
15 | font-size: 18px;
16 | }
17 | }
--------------------------------------------------------------------------------
/firebase-guide-setup.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/firebase-guide-setup.docx
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/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 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/ngrx/ngrx-test-app/src/app/app.component.css
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
19 |
4 | User Info:
5 |
6 |
9 | Username:
7 |Johny
8 |
10 |
13 | Email:
11 |john.doe@gmail.com
12 |
14 |
17 |
18 | Phone:
15 |+359 885 888 888
16 |
2 |
5 |
7 |
9 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/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 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/post/post.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/ngrx/ngrx-test-app/src/app/post/post.component.css
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/post/post.component.html:
--------------------------------------------------------------------------------
1 | Hi, there!
4 |5 |
7 |
2 |
15 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/post/post.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PostComponent } from './post.component';
4 |
5 | describe('PostComponent', () => {
6 | let component: PostComponent;
7 | let fixture: ComponentFixture{{ p.text }}
3 |
4 | Likes:
5 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{ p.likes }}
6 |redux-simulation works!
2 | -------------------------------------------------------------------------------- /ngrx/ngrx-test-app/src/app/translate/translate.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-June-2023/71c5f420387dab2f23f5dfb72de4040c95dd83ae/ngrx/ngrx-test-app/src/app/translate/translate.component.css -------------------------------------------------------------------------------- /ngrx/ngrx-test-app/src/app/translate/translate.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ message$ | async }}
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/ngrx/ngrx-test-app/src/app/translate/translate.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TranslateComponent } from './translate.component';
4 |
5 | describe('TranslateComponent', () => {
6 | let component: TranslateComponent;
7 | let fixture: ComponentFixturehome works!
2 | -------------------------------------------------------------------------------- /pipes and subjects/pipes-and-subjects/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixturelazy works!
2 | -------------------------------------------------------------------------------- /pipes and subjects/pipes-and-subjects/src/app/lazy/lazy/lazy.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LazyComponent } from './lazy.component'; 4 | 5 | describe('LazyComponent', () => { 6 | let component: LazyComponent; 7 | let fixture: ComponentFixture
2 |
5 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/main/main.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MainComponent } from './main.component';
4 |
5 | describe('MainComponent', () => {
6 | let component: MainComponent;
7 | let fixture: ComponentFixtureLoading...
2 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/loader/loader.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-loader',
5 | templateUrl: './loader.component.html',
6 | styleUrls: ['./loader.component.css'],
7 | })
8 | export class LoaderComponent {}
9 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/pipes/elapsed-time.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { ElapsedTimePipe } from './elapsed-time.pipe';
2 |
3 | describe('ElapsedTimePipe', () => {
4 | it('create an instance', () => {
5 | const pipe = new ElapsedTimePipe();
6 | expect(pipe).toBeTruthy();
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/pipes/elapsed-time.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import * as moment from 'moment';
3 |
4 | @Pipe({
5 | name: 'elapsedTime',
6 | })
7 | export class ElapsedTimePipe implements PipeTransform {
8 | transform(dateString: string, ...args: unknown[]): unknown {
9 | // date from the posts from today's date
10 | return moment(dateString).fromNow();
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/pipes/slice.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { SlicePipe } from './slice.pipe';
2 |
3 | describe('SlicePipe', () => {
4 | it('create an instance', () => {
5 | const pipe = new SlicePipe();
6 | expect(pipe).toBeTruthy();
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/pipes/slice.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | @Pipe({
4 | name: 'slice',
5 | })
6 | export class SlicePipe implements PipeTransform {
7 | transform(value: string, maxCharCount = 5): unknown {
8 | return `${value.substring(0, maxCharCount)}${
9 | value.length > maxCharCount ? '...' : ''
10 | }`;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { LoaderComponent } from './loader/loader.component';
4 | import { AppEmailDirective } from './validators/app-email.directive';
5 | import { SlicePipe } from './pipes/slice.pipe';
6 | import { ElapsedTimePipe } from './pipes/elapsed-time.pipe';
7 |
8 | @NgModule({
9 | declarations: [
10 | LoaderComponent,
11 | AppEmailDirective,
12 | SlicePipe,
13 | ElapsedTimePipe,
14 | ],
15 | imports: [CommonModule],
16 | exports: [LoaderComponent, AppEmailDirective, SlicePipe, ElapsedTimePipe],
17 | })
18 | export class SharedModule {}
19 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/validators/app-email-validator.ts:
--------------------------------------------------------------------------------
1 | import { ValidatorFn } from "@angular/forms";
2 |
3 | export function appEmailValidator(domains: string[]): ValidatorFn {
4 | const domainStrings = domains.join("|"); // ['bg', 'com'] => bg|com
5 | const regExp = new RegExp(`[^@]{6,}@gmail\.(${domainStrings})$`);
6 |
7 | return (control) => {
8 | const x = control.value;
9 | const z = regExp.test(control.value);
10 | return control.value === "" || regExp.test(control.value)
11 | ? null
12 | : { appEmailValidator: true };
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/validators/app-email.directive.spec.ts:
--------------------------------------------------------------------------------
1 | import { AppEmailDirective } from './app-email.directive';
2 |
3 | describe('AppEmailDirective', () => {
4 | it('should create an instance', () => {
5 | const directive = new AppEmailDirective();
6 | expect(directive).toBeTruthy();
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/shared/validators/match-passwords-validator.ts:
--------------------------------------------------------------------------------
1 | import { FormGroup, ValidatorFn } from "@angular/forms";
2 |
3 | export function matchPasswordsValidator(
4 | passwordCtrlOne: string,
5 | passwordCtrlTwo: string
6 | ): ValidatorFn {
7 | return (control) => {
8 | const group = control as FormGroup;
9 | const passCtrl1 = group.get(passwordCtrlOne);
10 | const passCtrl2 = group.get(passwordCtrlTwo);
11 |
12 | return passCtrl1?.value === passCtrl2?.value
13 | ? null
14 | : { matchPasswordsValidator: true };
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/theme/theme.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { NewThemeComponent } from "./new-theme/new-theme.component";
4 | import { CurrentThemeComponent } from "./current-theme/current-theme.component";
5 | import { ThemeRoutingModule } from "./theme-routing.module";
6 | import { FormsModule } from "@angular/forms";
7 |
8 | @NgModule({
9 | declarations: [NewThemeComponent, CurrentThemeComponent],
10 | imports: [CommonModule, ThemeRoutingModule, FormsModule],
11 | })
12 | export class ThemeModule {}
13 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/types/post.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from './theme';
2 | import { UserId } from './user-id';
3 |
4 | export interface Post {
5 | likes: string[];
6 | _id: string;
7 | text: string;
8 | userId: UserId;
9 | themeId: Theme;
10 | created_at: string;
11 | updatedAt: string;
12 | __v: number;
13 | }
14 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/types/theme.ts:
--------------------------------------------------------------------------------
1 | import { Post } from './post';
2 | import { UserId } from './user-id';
3 |
4 | export interface Theme {
5 | subscribers: string[];
6 | posts: any; // string[] | Post[];
7 | _id: string;
8 | themeName: string;
9 | userId: UserId;
10 | created_at: string;
11 | updatedAt: string;
12 | __v: number;
13 | }
14 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/types/user-id.ts:
--------------------------------------------------------------------------------
1 | export interface UserId {
2 | themes: string[];
3 | posts: string[];
4 | _id: string;
5 | tel: string;
6 | email: string;
7 | username: string;
8 | password: string;
9 | created_at: string;
10 | updatedAt: string;
11 | __v: number;
12 | }
13 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/types/user.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | email: string;
3 | firstName: string;
4 | username: string;
5 | tel: string;
6 | // phoneNumber: string;
7 | // password: string;
8 | }
9 |
--------------------------------------------------------------------------------
/workshop pipes and subjects/workshop-pipes/src/app/user/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: ComponentFixture