Day 1 Learning

README.md

@@ -1,4 +1,4 @@
-# Angular17Learning
+# Angular 17 Learning
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.8.
 

angular.json

@@ -16,16 +16,12 @@
             "outputPath": "dist/angular-17-learning",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": []
           },
@@ -74,18 +70,14 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
+
             "scripts": []
           }
         }

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "bootstrap": "^5.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.ts

@@ -1,12 +1,22 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { AddEmployeeComponent } from './components/add-employee/add-employee.component';
+import { EmployeeListComponent } from './components/employee-list/employee-list.component';
+import { LifecycleEventsComponent } from './components/lifecycle-events/lifecycle-events.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [
+    RouterOutlet,
+    CommonModule,
+    AddEmployeeComponent,
+    EmployeeListComponent,
+    LifecycleEventsComponent,
+  ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'angular-17-learning';

src/app/components/ComponentNotes.md

@@ -0,0 +1,68 @@
+# Components:
+
+- Components are the main building blocks of an Angular App.
+- The Root Component contains a tree of Angular Components.
+- It is a subset of directives and always associated with a template.
+
+A Component in Angular is a TypeScript class that can contain methods and properties. This allows developers to create and bind their own functionality to the user interface.
+
+## Creating Angular Component using Angular CLI:
+
+We can create Angular Component using Angular CLI by following command:
+
+```bash
+ng g c <componentName>
+OR
+ng generate component <componentName>
+```
+
+## Generate Demo Component
+
+To generate a demo component, you can run the following command:
+
+```bash
+ng generate component demo / ng g c demo
+```
+
+## Files Generated After this Command Executes:
+
+- `componentName.component.ts` : This is the main class file of the component.
+- `componentName.component.html` : This is the template file for the component.
+- `componentName.component.css` : This is the CSS file for the component.
+- `componentName.component.spec.ts` : This is the unit test file for the component.
+
+### Example:
+
+```js
+@Component({
+  selector: 'app-my-component',
+  templateUrl: './my-component.component.html',
+  styleUrls: ['./my-component.component.css']
+})
+```
+
+If we want to use a template in our component, we can use the `template` property in the component. We can also use the `templateUrl` property to specify the path of the template file. Similarly, we can use `styleUrls` property to specify the path of the CSS file.
+
+```js
+@Component({
+  selector: 'app-my-component',
+  template: `
+    <div>
+      <h1>{{ title }}</h1>
+      <p>{{ description }}</p>
+    </div>
+  `,
+  styles: [`
+    div {
+      padding: 20px;
+      background-color: #f8f9fa;
+    }
+    h1 {
+      color: #007bff;
+    }
+    p {
+      color: #6c757d;
+    }
+  `]
+})
+```

src/app/components/add-employee/add-employee.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEmployeeComponent } from './add-employee.component';
+
+describe('AddEmployeeComponent', () => {
+  let component: AddEmployeeComponent;
+  let fixture: ComponentFixture<AddEmployeeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddEmployeeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddEmployeeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/add-employee/add-employee.component.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-add-employee',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './add-employee.component.html',
+  styleUrl: './add-employee.component.css',
+})
+export class AddEmployeeComponent {}

src/app/components/employee-list/employee-list.component.html

@@ -0,0 +1,21 @@
+<div class="container">
+  <h2>Employee List</h2>
+  <ul class="list-group">
+    <li
+      class="list-group-item d-flex justify-content-between align-items-center"
+      *ngFor="let employee of employees"
+    >
+      <div>
+        <b>Name:</b> {{ employee.name }}<br />
+        <b>Age:</b> {{ employee.age }}<br />
+        <b>Salary:</b> {{ employee.salary }}
+      </div>
+      <button class="btn btn-danger" (click)="deleteEmployee(employee.id)">
+        Delete
+      </button>
+    </li>
+  </ul>
+  <button class="btn btn-primary mt-3" (click)="employeeList()">
+    Add Employee
+  </button>
+</div>

src/app/components/employee-list/employee-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmployeeListComponent } from './employee-list.component';
+
+describe('EmployeeListComponent', () => {
+  let component: EmployeeListComponent;
+  let fixture: ComponentFixture<EmployeeListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EmployeeListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EmployeeListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/employee-list/employee-list.component.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-employee-list',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './employee-list.component.html',
+  styleUrl: './employee-list.component.css',
+})
+export class EmployeeListComponent {
+  employees = [
+    { id: 1, name: 'John Doe', age: 25, salary: 5000 },
+    { id: 2, name: 'Jane Smith', age: 30, salary: 6000 },
+    { id: 3, name: 'Bob Johnson', age: 40, salary: 7000 },
+  ];
+
+  employeeList() {
+    const randomId = Math.floor(Math.random() * 1000) + 4;
+    const randomNames = [
+      'Alice Brown',
+      'Charlie White',
+      'Daisy Green',
+      'Edward Black',
+      'Fiona Blue',
+    ];
+    const randomName =
+      randomNames[Math.floor(Math.random() * randomNames.length)];
+    const randomAge = Math.floor(Math.random() * 30) + 20;
+    const randomSalary = Math.floor(Math.random() * 5000) + 4000;
+
+    const randomEmployee = {
+      id: randomId,
+      name: randomName,
+      age: randomAge,
+      salary: randomSalary,
+    };
+
+    this.employees.push(randomEmployee);
+  }
+  deleteEmployee(employeeId: number) {
+    this.employees = this.employees.filter(
+      (employee) => employee.id !== employeeId
+    );
+  }
+}

src/app/components/lifecycle-events/LifeCycleEvents.md

@@ -0,0 +1,52 @@
+# LifeCycle Events:
+
+A component's lifecycle is the sequence of steps that happen between the component's creation and its destruction.
+
+- Constructor
+- ngOnInit
+- ngDoCheck
+- ngAfterContentInit
+- ngAfterContentChecked
+- ngAfterViewInit
+- ngAfterViewChecked
+- ngOnDestroy
+- ngChanges
+
+## Constructor
+
+- We use it for initialization of Variables in a Component.
+
+## OnInit
+
+- Called when the component is initialized
+- Called automatically after the component is loaded.
+- Normally it is used for setup tasks like fetching data from an API.
+
+## DoCheck
+
+- Called when the component is checked/ change is detected.
+
+## AfterContentInit
+
+- Called when angular projects external content into Component's view.
+
+## AfterContentChecked
+
+- Called when angular checks the content projected into Component's view.
+
+## AfterViewInit
+
+- Called after angular initializes the component's view, child's view, or the view that contains the directive.
+
+## AfterViewChecked
+
+- Called after angular checks the component's view, child's view, or the view that contains the directive.
+
+## OnDestroy
+
+- Cleanup just before angular destroys the component, Unsubscribe Observables & detach event handlers to avoid memory leaks.
+
+## OnChanges
+
+- Called when any data-bound property of a directive changes.
+- It is called after ngOnInit and ngDoCheck and is used in the reuseable components