andrewjbateman / angular-animated-list

:clipboard: App using interpolation, property-binding, event-binding and Formbuilding to add text items to a list.

⚡ Angular Animated List

• App using services, routing, interpolation, property & event-binding and Formbuilding to add text items to a list.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Animated List
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Routing module allows user to navigate between Home and About pages.
• Item is added to an existing list of Programming Items.
• Angular FormBuilder used to create a simple form.
• RxJS BehaviourSubject used: A Subject that requires an initial value and emits its current value to new subscribers
• Angular Forms Module: Implements a set of directives and providers to communicate with native DOM elements when building forms to capture user input.

📷 Screenshots

.

📶 Technologies

• Angular v16
• RxJS Library v7 used to subscribe to input data observable.
• Angular Forms Module v16 used for form entry.

💾 Setup

• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to create an optimzed build file.
• Run npm run build:github to create an optimised build file and deploy to your Github repo.

💻 Code Examples

• Home.Component class from home.component.ts

export class HomeComponent implements OnInit {

  itemCount: number;
  btnText: string = 'Add an item to the list';
  goalText: string = 'Another programming item';
  goals = [];

  constructor(private _data: DataService) { }

  ngOnInit(): void {
    this._data.goal.subscribe(res => this.goals = res);
    this.itemCount = this.goals.length;
    this._data.changeGoal(this.goals);
  }

  addItem(): void {
    this.goals.push(this.goalText);
    this.goalText = '';
    this.itemCount = this.goals.length;
    this._data.changeGoal(this.goals);
  }

  removeItem(i: number): void {
    this.goals.splice(i, 1);
    this._data.changeGoal(this.goals);
  }
}

🆒 Features

• Angular animations library used to make data entry more interesting.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Gary Simon of DesignCourse Tutorial: Learn Angular 5 in less than 60 Minutes - Free Beginner's Course

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]