Beginners To Experts

The site is under development.

Angular Projects

How to Run Any Angular Project:


  1. Install Node.js (Download from official site)

  2. Install Angular CLI globally:
    npm install -g @angular/cli

  3. Create new project or clone one:
    ng new my-app or git clone <repo>

  4. Navigate into the project:
    cd my-app

  5. Install dependencies:
    npm install

  6. Start the project:
    ng serve

  7. Open in browser:
    http://localhost:4200

Common Angular Errors & Fixes:


  • Error: Cannot find module '@angular/core'
    Fix: Run npm install to restore all dependencies.

  • Error: ng command not found
    Fix: Make sure Angular CLI is installed globally with npm install -g @angular/cli

  • Error: Package "XYZ" not found
    Fix: Run npm install XYZ to install missing package.

  • Error: Port 4200 is already in use
    Fix: Run ng serve --port 4300 to use another port.

  • Error: Cannot bind to 'ngModel' since it isn't a known property
    Fix: Import FormsModule in your module file.

How to Run:


  1. Create project: ng new todo-app

  2. Navigate: cd todo-app

  3. Run: ng serve

Code:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo) {
      this.todos.push(this.newTodo);
      localStorage.setItem('todos', JSON.stringify(this.todos));
      this.newTodo = '';
    }
  }

  deleteTodo(index: number) {
    this.todos.splice(index, 1);
    localStorage.setItem('todos', JSON.stringify(this.todos));
  }

  ngOnInit() {
    const saved = localStorage.getItem('todos');
    if (saved) {
      this.todos = JSON.parse(saved);
    }
  }
}
      
// app.component.html
<div style="text-align:center">
  <h2>Todo List</h2>
  <input [(ngModel)]="newTodo" placeholder="Add todo" />
  <button (click)="addTodo()">Add</button>
  <ul>
    <li *ngFor="let todo of todos; let i = index">
      {{ todo }} <button (click)="deleteTodo(i)">Delete</button>
    </li>
  </ul>
</div>

Project Overview:

A simple Angular app to fetch and display current weather data using the OpenWeatherMap API.

Features:

  • Search for a city
  • Display temperature, weather condition, and icon

Technologies Used:

Angular, HTTPClient, OpenWeatherMap API

How It Works:

User enters a city name, and the app fetches weather info via HTTP request to the API.

Folder Structure:

/src
  /app
    app.component.ts
    app.component.html
    app.module.ts

Code:

// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  city: string = '';
  weatherData: any;

  constructor(private http: HttpClient) {}

  getWeather() {
    const apiKey = 'your_api_key_here';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&units=metric&appid=${apiKey}`;
    this.http.get(url).subscribe(data => {
      this.weatherData = data;
    });
  }
}
      
// app.component.html
<div style="text-align:center">
  <h2>Weather App</h2>
  <input [(ngModel)]="city" placeholder="Enter city name" />
  <button (click)="getWeather()">Get Weather</button>

  <div *ngIf="weatherData">
    <h3>{{ weatherData.name }}</h3>
    <p>Temperature: {{ weatherData.main.temp }} °C</p>
    <p>Condition: {{ weatherData.weather[0].main }}</p>
    <img [src]="'http://openweathermap.org/img/w/' + weatherData.weather[0].icon + '.png'" />
  </div>
</div>

Output:

The app displays the city name, temperature in Celsius, weather condition (e.g., Clear, Clouds), and an icon representing the condition. The user can repeatedly query different cities.

Project Overview:


This project is a simple recipe book web application built with Angular that allows users to list, add, edit, and delete recipes. Each recipe includes a title, description, and image.


Features:


  • View a list of recipes

  • Add new recipes with title, description, and image

  • Edit existing recipes

  • Delete recipes

  • Data persisted in browser local storage

Technologies Used:


  • Angular

  • TypeScript

  • HTML/CSS

  • Bootstrap (optional)

How It Works:


  1. User inputs recipe data through a form.

  2. Data is stored in an array and saved to local storage.

  3. Recipes are displayed dynamically using *ngFor.

  4. Edit and Delete buttons update or remove entries.

Folder Structure:


/src
  /app
    app.component.ts
    app.component.html
    app.component.css

Code:

// app.component.ts
import { Component, OnInit } from '@angular/core';

interface Recipe {
  title: string;
  description: string;
  imageUrl: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  recipes: Recipe[] = [];
  newRecipe: Recipe = { title: '', description: '', imageUrl: '' };

  ngOnInit() {
    const stored = localStorage.getItem('recipes');
    if (stored) {
      this.recipes = JSON.parse(stored);
    }
  }

  addRecipe() {
    this.recipes.push({ ...this.newRecipe });
    this.save();
    this.newRecipe = { title: '', description: '', imageUrl: '' };
  }

  deleteRecipe(i: number) {
    this.recipes.splice(i, 1);
    this.save();
  }

  save() {
    localStorage.setItem('recipes', JSON.stringify(this.recipes));
  }
}
      
// app.component.html
<div class="container">
  <h2>Recipe Book</h2>
  <div>
    <input [(ngModel)]="newRecipe.title" placeholder="Title" />
    <input [(ngModel)]="newRecipe.description" placeholder="Description" />
    <input [(ngModel)]="newRecipe.imageUrl" placeholder="Image URL" />
    <button (click)="addRecipe()">Add Recipe</button>
  </div>
  <div *ngFor="let recipe of recipes; let i = index">
    <h4>{{ recipe.title }}</h4>
    <p>{{ recipe.description }}</p>
    <img [src]="recipe.imageUrl" width="100" height="100" />
    <button (click)="deleteRecipe(i)">Delete</button>
  </div>
</div>

Output:


User sees a list of recipes with images and buttons to add or remove them dynamically. Images render directly from the provided URLs.