Rest Operator
11 | 12 | 21 | 22 | -------------------------------------------------------------------------------- /firstapp/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: ComponentFixtureChange my color
2 |
3 | Change Color:
4 | Green
5 | Red
6 | Cyan
7 |
8 |
9 | 10 | 11 |
12 |
19 | Counter Tab
13 |
14 |
18 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /FoodOrder_App/Food_order/src/app/components/partial/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture
3 | Foodie
4 |
27 |
28 | If Else
11 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /fb-login-page-routing/src/app/forgot-password/forgot-password.component.html: -------------------------------------------------------------------------------- 1 |
2 |
16 |
17 |
--------------------------------------------------------------------------------
/fb-login-page-routing/src/app/login/login.component.css:
--------------------------------------------------------------------------------
1 | /* .card{
2 | width:60%;
3 | height:300px;
4 | margin-top:50px;
5 | margin-left:10px;
6 | border:none;
7 | box-shadow:3px 3px 3px lightgray;
8 | } */
9 |
10 | .card-body{
11 | padding:30px;
12 | margin-top:50px;
13 | margin-right:10px;
14 | }
15 |
16 | div{
17 | margin-bottom: 20px;
18 | }
19 |
20 | /* style="padding: 30px; margin-top: 50px; margin-right: 10px;" */
21 | input{
22 | width:80%;
23 | height:40px;
24 | padding:20px;
25 | margin:20px;
26 | }
27 |
28 | #sub{
29 | width:40%;
30 | height:40px;
31 | padding:5px;
32 | margin-bottom:20px;
33 | text-align: center;
34 | background-color:rgb(45, 120, 149);
35 | color:white;
36 | border-radius:5px;
37 | }
38 |
39 | a{
40 | margin:10px;
41 | padding:30px;
42 | text-align: center;
43 | text-decoration:underline;
44 | margin-top: 30px;
45 | padding-top: 60px;
46 | }
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { CartPageComponent } from './components/pages/cart-page/cart-page.component';
4 | import { FoodPageComponent } from './components/pages/food-page/food-page.component';
5 | import { HomeComponent } from './components/pages/home/home.component';
6 | import { LoginComponent } from './components/pages/login/login.component';
7 |
8 | const routes: Routes = [
9 | { path: '', component: HomeComponent },
10 | { path: 'search/:searchItem', component: HomeComponent },
11 | { path: 'tag/:tag', component: HomeComponent },
12 | { path: 'food/:id', component: FoodPageComponent },
13 | { path: 'cart-page', component: CartPageComponent },
14 | { path: 'login', component: LoginComponent }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forRoot(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class AppRoutingModule { }
22 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/components/partial/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { CartService } from 'src/app/services/cart.service';
3 | import { UserService } from 'src/app/services/user.service';
4 | import { User } from 'user';
5 |
6 | @Component({
7 | selector: 'app-header',
8 | templateUrl: './header.component.html',
9 | styleUrls: ['./header.component.css']
10 | })
11 | export class HeaderComponent implements OnInit {
12 | cartQuantity=0;
13 | user!:User
14 | constructor(private cartService:CartService, private userservice:UserService) {
15 | cartService.getCartObservable().subscribe((newcart)=>{
16 | this.cartQuantity=newcart.totalCount
17 | })
18 | userservice.userObservable.subscribe((newUser)=>{
19 | this.user=newUser
20 | })
21 | }
22 | logout(){
23 | this.userservice.logOut();
24 | }
25 | ngOnInit(): void {
26 | }
27 | get isAuth(){
28 | return this.user.token
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/fb-login-page-routing/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { AuthGuard } from './../../../firstapp/src/app/auth.guard';
2 | import { NgModule } from '@angular/core';
3 | import { RouterModule, Routes } from '@angular/router';
4 | import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
5 | import { LoginComponent } from './login/login.component';
6 | import { SignupComponent } from './signup/signup.component';
7 | import { ProfileComponent } from './profile/profile.component';
8 |
9 |
10 | const routes: Routes = [
11 | { path: '', redirectTo: '/login', pathMatch: 'full' },
12 | { path: 'login', component:LoginComponent },
13 | { path: 'signup', component:SignupComponent },
14 | { path: 'forgot', component:ForgotPasswordComponent },
15 | { path: 'profile',canActivate:[AuthGuard],component:ProfileComponent }
16 |
17 | ];
18 |
19 | @NgModule({
20 | imports: [RouterModule.forRoot(routes)],
21 | exports: [RouterModule]
22 | })
23 | export class AppRoutingModule { }
24 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/components/pages/cart-page/cart-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Cart } from 'Cart';
3 | import { CartItem } from 'CartItems';
4 | import { CartService } from 'src/app/services/cart.service';
5 |
6 | @Component({
7 | selector: 'app-cart-page',
8 | templateUrl: './cart-page.component.html',
9 | styleUrls: ['./cart-page.component.css']
10 | })
11 | export class CartPageComponent implements OnInit {
12 | cart!:Cart;
13 | constructor(private cartService:CartService) {
14 | this.cartService.getCartObservable().subscribe((cart)=>{
15 | this.cart=cart;
16 | })
17 | }
18 |
19 | ngOnInit(): void {
20 | }
21 | removeFromCart(cartItem:CartItem){
22 | this.cartService.removeFromCart(cartItem.food.id)
23 | }
24 |
25 | changeQuantity(cartItem:CartItem,quantityInString:string){
26 | const quantity=parseInt(quantityInString);
27 | this.cartService.changeQuantity(cartItem.food.id,quantity)
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/FoodOrder_App/backend/src/models/food.model.ts:
--------------------------------------------------------------------------------
1 | import { Schema, model } from "mongoose";
2 |
3 | export interface Food{
4 | id:string ;
5 | name:string;
6 | price:number;
7 | tags?:string[];
8 | favorite:boolean;
9 | stars:number;
10 | imageUrl:string;
11 | origins:string[];
12 | cookTime:string;
13 | }
14 | export const FoodSchema=new SchemaPassword Reset
3 |
4 |
15 | 5 | Enter your email address and we'll send you an email with instructions to reset your password. 6 |
7 |
8 |
9 |
10 | Reset password
11 |
12 | Need a new Account? Register
13 |
14 | Switch Case
11 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /FoodOrder_App/Food_order/src/app/components/pages/food-page/food-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | import { Food } from 'Food'; 4 | import { CartService } from 'src/app/services/cart.service'; 5 | import { FoodService } from 'src/app/services/food.service'; 6 | 7 | @Component({ 8 | selector: 'app-food-page', 9 | templateUrl: './food-page.component.html', 10 | styleUrls: ['./food-page.component.css'] 11 | }) 12 | export class FoodPageComponent implements OnInit { 13 | food!:Food; 14 | constructor(activatedRoute:ActivatedRoute,foodService:FoodService, 15 | private cartService:CartService,private router:Router) { 16 | activatedRoute.params.subscribe((params)=>{ 17 | if(params['id']) 18 | foodService.getFoodById(params['id']).subscribe(serverFood=>{ 19 | this.food=serverFood 20 | }) 21 | }) 22 | } 23 | 24 | ngOnInit(): void { 25 | } 26 | addToCart():void{ 27 | this.cartService.addToCart(this.food); 28 | this.router.navigateByUrl("/cart-page") 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /03 notes/ngStyle.txt: -------------------------------------------------------------------------------- 1 | ngStyle 2 | The ngStyle directive lets you set a given DOM elements style properties. 3 | 4 | 5 | ngStyle becomes musch more useful when the value is dynamic. 6 | 7 | 8 | app.component.ts 9 | people:any[]=[ 10 | 11 | { 12 | "name":"vaishanvi", 13 | "country:"India" 14 | }, 15 | { 16 | "name":"Pratiksha", 17 | "country:"UK" 18 | }, 19 | { 20 | "name":"Namrata", 21 | "country:"India" 22 | }, 23 | { 24 | "name":"Khushabu", 25 | "country:"UK" 26 | }, 27 | { 28 | "name":"Janvi", 29 | "country:"India" 30 | }, 31 | { 32 | "name":"Seema", 33 | "country:"UK" 34 | }, 35 | { 36 | "name":"Rutuja", 37 | "country:"India" 38 | } 39 | 40 | ]; 41 | getColor(country){ 42 | switch(country){ 43 | case 'India': 44 | return 'green'; 45 | case 'UK': 46 | return 'blue'; 47 | } 48 | } 49 | } 50 | 51 | app.component.html 52 |-
53 |
- 54 | {{person.name}}-{{person.country}} 55 | 56 | 57 | 58 |
2 |
--------------------------------------------------------------------------------
/firstapp/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'firstapp'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('firstapp');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('firstapp app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/03 notes/ngClass.txt:
--------------------------------------------------------------------------------
1 | ngClass directive allows us to set the CSS Dynamically for a DOM element.
2 | ngClass with string
3 | ngClass with array
4 | ngClass with object
5 | ngClass with component method
6 |
7 |
8 | app.component.css
9 | .one{
10 | color:blue;
11 | }
12 | .two{
13 | font-size:30px;
14 | }
15 | .three{
16 | color:green;
17 | }
18 | .four
19 | {
20 | font-weight:bold;
21 | }
22 |
23 | app.component.html
24 |
3 |
27 | ngClass as a string
25 |using ngclass with string example
26 | 27 |
28 | {{user}}
29 |
30 |
31 | Example using ng class as object
32 | 33 |
34 | example using ngclass with component method
35 |
{
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'Food_order'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('Food_order');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('Food_order app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/todoList/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'boot-ng-material'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('boot-ng-material');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('boot-ng-material app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/01 JavaScript/ArrayCRUD.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Object in JS
11 | 12 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /todoList/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppRoutingModule } from 'src/app/app-routing.module'; 6 | import { AppComponent } from 'src/app/app.component'; 7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 8 | import { ToDoListComponent } from 'src/app/todo-list/todo-list.component'; 9 | 10 | import { MatButtonModule } from '@angular/material/button'; 11 | import { MatCardModule } from '@angular/material/card'; 12 | import { MatInputModule } from '@angular/material/input'; 13 | import { MatFormFieldModule } from '@angular/material/form-field'; 14 | import {DragDropModule} from '@angular/cdk/drag-drop' 15 | import { MatIconModule } from '@angular/material/icon'; 16 | 17 | 18 | @NgModule({ 19 | declarations: [ 20 | AppComponent, 21 | ToDoListComponent 22 | ], 23 | imports: [ 24 | BrowserModule, 25 | AppRoutingModule, 26 | BrowserAnimationsModule, 27 | MatButtonModule, 28 | MatFormFieldModule, 29 | FormsModule, 30 | ReactiveFormsModule, 31 | MatCardModule, 32 | MatInputModule, 33 | DragDropModule, 34 | MatIconModule 35 | ], 36 | providers: [], 37 | bootstrap: [AppComponent] 38 | }) 39 | export class AppModule { } 40 | -------------------------------------------------------------------------------- /FoodOrder_App/Food_order/src/app/components/pages/home/home.component.html: -------------------------------------------------------------------------------- 1 |-
5 |
-
6 |
7 |
8 |
9 |48 | 49 | 50 |10 | {{food.name}} 11 |12 | 13 | 14 | 15 | 16 | 17 |18 |28 | 40 |25 | 26 | 27 |41 | 42 | {{food.price |currency}} 43 | 44 |45 | 46 | 47 |
51 |
Hoisting
11 | 12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /FoodOrder_App/Food_order/src/app/components/pages/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 3 | import { ActivatedRoute, Router } from '@angular/router'; 4 | import { UserService } from 'src/app/services/user.service'; 5 | 6 | @Component({ 7 | selector: 'app-login', 8 | templateUrl: './login.component.html', 9 | styleUrls: ['./login.component.css'] 10 | }) 11 | export class LoginComponent implements OnInit { 12 | loginForm!:FormGroup; 13 | isSubmitted=false; 14 | returnUrl=""; 15 | constructor(private formbuilder:FormBuilder, private userservice:UserService, 16 | private activatedRoute:ActivatedRoute, 17 | private router:Router) { } 18 | 19 | ngOnInit(): void { 20 | this.loginForm=this.formbuilder.group({ 21 | email:['',[Validators.required,Validators.email]], 22 | password:['',Validators.required] 23 | }) 24 | this.returnUrl=this.activatedRoute.snapshot.queryParams['returnUrl'] 25 | } 26 | get formControls(){ 27 | return this.loginForm.controls; 28 | } 29 | submit(){ 30 | 31 | this.isSubmitted=true; 32 | if(this.loginForm.invalid) 33 | return 34 | this.userservice.login({ 35 | email: this.formControls['email'].value, 36 | password: this.formControls['password'].value}).subscribe(()=>{ 37 | this.router.navigateByUrl(this.returnUrl) 38 | }) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /01 JavaScript/function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |Operation Functions
11 |
12 |
49 |
50 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/components/pages/food-page/food-page.component.html:
--------------------------------------------------------------------------------
1 |
10 | ![]()
11 |
12 |
58 |
--------------------------------------------------------------------------------
/todoList/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todolist",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^15.2.0",
14 | "@angular/cdk": "^15.2.6",
15 | "@angular/common": "^15.2.0",
16 | "@angular/compiler": "^15.2.0",
17 | "@angular/core": "^15.2.0",
18 | "@angular/forms": "^15.2.0",
19 | "@angular/material": "^15.2.6",
20 | "@angular/platform-browser": "^15.2.0",
21 | "@angular/platform-browser-dynamic": "^15.2.0",
22 | "@angular/router": "^15.2.0",
23 | "@ng-bootstrap/ng-bootstrap": "^14.1.0",
24 | "rxjs": "~7.8.0",
25 | "tslib": "^2.3.0",
26 | "zone.js": "~0.12.0"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "^15.2.0",
30 | "@angular/cli": "~15.2.0",
31 | "@angular/compiler-cli": "^15.2.0",
32 | "@types/jasmine": "~4.3.0",
33 | "jasmine-core": "~4.5.0",
34 | "karma": "~6.4.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.2.0",
37 | "karma-jasmine": "~5.1.0",
38 | "karma-jasmine-html-reporter": "~2.0.0",
39 | "typescript": "~4.9.4"
40 | },
41 | "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.",
42 | "main": "index.js",
43 | "author": "",
44 | "license": "ISC"
45 | }
46 |
--------------------------------------------------------------------------------
/fb-login-page-routing/src/app/profile/profile.component.html:
--------------------------------------------------------------------------------
1 |
13 |
57 | v
14 |
15 | {{food.name}}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
35 | {{origin}}
36 |
37 |
38 |
41 |
42 |
43 |
44 | Time to cook about {{food.cookTime}}minutes
45 |
46 |
47 |
48 |
49 |
50 |
51 | {{food.price |currency}}
52 |
53 |
54 |
55 |
56 |
2 |
37 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/components/pages/cart-page/cart-page.component.html:
--------------------------------------------------------------------------------
1 |
3 |
36 |
6 |
9 | Arjun J
10 | @arjundhav
11 |
12 |
35 |
13 | 1000 Followers
14 |
15 |
16 |
17 | Arjun J is Web Developer from Nanded
18 | He is an Full Stack Enthusiatic 19 | 20 |
21 | 18 | He is an Full Stack Enthusiatic 19 | 20 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Joined March,2023
29 |
30 |
31 |
32 | Logout
33 |
34 |
10 |
50 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/components/pages/home/home.component.css:
--------------------------------------------------------------------------------
1 | ul{
2 | list-style: none;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | flex-wrap: wrap;
7 | padding: 0;
8 | }
9 | li a{
10 | height: 22.5rem;
11 | width:20rem;
12 | border: 1px solid whitesmoke;
13 | border-radius: 1rem;
14 | margin: 0.5rem;
15 | display: flex;
16 | flex-direction: column;
17 | overflow: hidden;
18 | color: #e72929;
19 | }
20 | li a:hover{
21 | cursor: pointer;
22 | opacity: 0.9;
23 |
24 | }
25 | li a img{
26 | object-fit: cover;
27 | height: 14.5rem;
28 | }
29 | .content{
30 | margin-top:0.3rem;
31 | padding: 0.5rem 1rem;
32 | position: relative;
33 | height: 8rem;
34 | }
35 | .favorite{
36 | font-size: 1.4rem;
37 | position: absolute;
38 | top:0.5rem;
39 | right:1rem
40 | }
41 | .favorite.not{
42 | color: grey;
43 | }
44 | .stars{
45 | margin-bottom: 0.2rem;
46 | }
47 | .product-item-footer{
48 | display: flex;
49 | justify-content: space-between;
50 | }
51 | .origins{
52 | flex: 9;
53 |
54 | }
55 | .origins span{
56 | border-radius: 2rem;
57 | background-color: whitesmoke;
58 | display: inline-block;
59 | padding: 0 0.5rem;
60 | font-size: 0.8rem;
61 | color: grey;
62 | margin-right: 0.3rem;
63 | margin-top: 0.3rem;
64 | }
65 | .cook-time{
66 | font-size: 0.9rem;
67 | flex: 3;
68 | text-align: right;
69 | }
70 | .price{
71 | position: absolute;
72 | bottom: 0;
73 | left: 0.9rem;
74 | background: white;
75 | padding: 0.3rem 100% 0 0;
76 | color:rgb(157, 157, 157);
77 | margin-top: 0.7rem;
78 | font-size: 1.1rem;
79 | }
80 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/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'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/food-order'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/01 JavaScript/mathMethod.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | -
11 |
-
12 | 13 |15 |
14 |
16 | 17 | {{cartItem.food.name}} 18 | 19 | 20 |21 |22 | 31 |32 |33 | {{cartItem.price |currency}} 34 |35 | 36 |37 | 38 |39 |
40 |
42 |
49 |
43 |
47 | Proceed to checkout
48 | {{cart.totalCount}}
44 | {{cart.totalPrice|currency}}
45 |
46 | Loops
11 |
12 |
73 |
74 |
--------------------------------------------------------------------------------
/03 notes/ng-switch.txt:
--------------------------------------------------------------------------------
1 | ngSwitch
2 | ngSwitch is actually comprised of two directives, an attribute directive and a structural
3 | directive. It's very similar to a switch statement in javascript and other programming lanuages,but in the tempalte.
4 |
5 | The ng-switch directive lets you hide/show HTML elements depending on an expression.
6 |
7 | We can also define a deafault section, by using the ng-switch-default directive, to show a section if none of the other
8 | sections get a match.
9 |
10 | Three things to keep in mind -NgSwitch, ngSwitchCase, ngSwitchDefault.
11 |
12 | app.component.html
13 | For Loop
13 | 18 | 19 |For each Loop
20 | 26 | 27 |While Loop
28 | 35 | 36 |Do While Loop
37 | 44 | 45 |While llop with break
46 | 56 | 57 |For In Loop
58 | 64 | 65 |For Of Loop
66 | 72 |using switch
14 | 22 |
23 |
28 |
29 |
30 | App.component.ts
31 | export class Appcomponent{
32 | public choose='';
33 | setvalue(drp:any){
34 | this.choose=drp.target.value;
35 | }
36 |
37 | **************************************************
38 | Acess Modifier in Typescript:
39 | public-It is default. no need to mention it.
40 | private -If is used in function only.
41 | protected-same as like private
42 |
43 | class Students{
44 | private firstname:string;
45 | private lastname:string;
46 | private age:number;
47 |
48 |
49 | constructor( private firstname:string, private age:number, private lastname?:string){
50 | this.firstname = firstname;
51 | this.lastname = lastname;
52 | this.age = age;
53 | }
54 | getFirstname(){
55 | console.log("My firstname is" + this.firstname + " " + this.age);
56 | }
57 | getLastname(){
58 | }
59 | }
60 |
61 | let stu = new Students("Vishank",10);
62 | stu.age =11;
63 | stud.getFirstname();
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/services/cart.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Cart } from 'Cart';
3 | import { CartItem } from 'CartItems';
4 | import { Food } from 'Food';
5 | import { BehaviorSubject, Observable } from 'rxjs';
6 |
7 | @Injectable({
8 | providedIn: 'root'
9 | })
10 | export class CartService {
11 | private cart = new Cart();
12 | private cartSubject: BehaviorSubjectFirst
24 |Second
25 |Third
26 |Default
27 |
2 |
--------------------------------------------------------------------------------
/01 JavaScript/numberMethod.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
3 |
38 |
39 |
4 | 
5 |
6 | 
7 |
8 |
9 |
5 |
6 |
7 |
8 |
10 |
37 |
11 |
36 |
12 |
35 | Facebook Login
13 |Connect with friends and the world around you on Facebook.
14 | 33 | 34 |
2 |
--------------------------------------------------------------------------------
/FoodOrder_App/Food_order/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import {HttpClientModule} from '@angular/common/http'
4 |
5 | import { AppRoutingModule } from './app-routing.module';
6 | import { AppComponent } from './app.component';
7 | import { HeaderComponent } from './components/partial/header/header.component';
8 | import { HomeComponent } from './components/pages/home/home.component';
9 | import { RatingModule } from 'ng-starrating';
10 | import { FoodPageComponent } from './components/pages/food-page/food-page.component';
11 | import { CartPageComponent } from './components/pages/cart-page/cart-page.component';
12 | import { TitleComponent } from './components/partial/title/title.component';
13 | import { NotFoundComponent } from './components/partial/not-found/not-found.component';
14 | import { SearchComponent } from './components/partial/search/search.component';
15 | import { TagsComponent } from './components/partial/tags/tags.component';
16 | import { LoginComponent } from './components/pages/login/login.component';
17 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
18 | import { ToastrModule } from 'ngx-toastr';
19 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
20 | import { InputContainerComponent } from './components/partial/input-container/input-container.component';
21 | import { ValidationsComponent } from './components/partial/validations/validations.component'
22 | @NgModule({
23 | declarations: [
24 | AppComponent,
25 | HeaderComponent,
26 | HomeComponent,
27 | FoodPageComponent,
28 | CartPageComponent,
29 | TitleComponent,
30 | NotFoundComponent,
31 | SearchComponent,
32 | TagsComponent,
33 | LoginComponent,
34 | InputContainerComponent,
35 | ValidationsComponent,
36 |
37 | ],
38 | imports: [
39 | BrowserModule,
40 | BrowserAnimationsModule,
41 | AppRoutingModule,
42 | RatingModule,
43 | HttpClientModule,
44 | ReactiveFormsModule, FormsModule,
45 | ToastrModule.forRoot({
46 | timeOut:3000,
47 | positionClass:'toast-bottom-right',
48 | newestOnTop:false
49 | })
50 |
51 |
52 | ],
53 | providers: [],
54 | bootstrap: [AppComponent]
55 | })
56 | export class AppModule { }
57 |
--------------------------------------------------------------------------------
/todoList/src/app/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
1 | import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
2 | import { Component, OnInit } from '@angular/core';
3 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
4 | import { ITask } from 'src/app/todo-list/task';
5 |
6 |
7 | @Component({
8 | selector: 'app-to-do-list',
9 | templateUrl: './todo-list.component.html',
10 | styleUrls: ['./todo-list.component.css']
11 | })
12 |
13 | export class ToDoListComponent implements OnInit {
14 | tasks:ITask[]=[];
15 | signUP!:FormGroup
16 | updateID!: any;
17 | done: ITask[]=[];
18 | isEditEnabled:boolean = false;
19 | action: string='Add';
20 | Inprogress:ITask[]=[];
21 | Done:ITask[]=[];
22 |
23 | constructor(private fb:FormBuilder) { }
24 |
25 | ngOnInit(): void {
26 | this.signUP=this.fb.group({
27 | task:['',Validators.required]
28 | } )
29 | }
30 |
31 | addTask(){
32 | console.log("Adding Task")
33 | this.tasks.push({
34 | description:this.signUP.value.task,
35 | done:false
36 | })
37 | }
38 |
39 | deleteTask(i:number){
40 | console.log("Deleting")
41 | this.tasks.splice(i,1);
42 | }
43 |
44 | deleteTaskInprogress(i:number){
45 | console.log("Deleting")
46 | this.Inprogress.splice(i,1);
47 | }
48 |
49 | deleteTaskDone(i:number){
50 | console.log("Deleting")
51 | this.Done.splice(i,1);
52 | }
53 |
54 | editTask(item:ITask,i:number){
55 | console.log("Editing")
56 | this.signUP.controls['task'].setValue(item.description);
57 | this.updateID=i;
58 | this.isEditEnabled=true;
59 | }
60 |
61 | updateTask(){
62 | console.log("Updating")
63 | this.tasks[this.updateID].description=this.signUP.value.task;
64 | this.tasks[this.updateID].done=true;
65 | this.signUP.reset();
66 | this.updateID= undefined;
67 | this.isEditEnabled=false;
68 | }
69 |
70 |
71 | drop(event: CdkDragDrop
3 |
42 |
43 |
4 |
5 |
6 |
7 |
8 |
9 |
5 |
6 |
7 |
8 |
10 |
41 |
11 |
40 |
12 |
39 | Facebook SignUp
13 |Connect with friends and the world around you on Facebook.
14 | 15 | 37 | 38 |