- 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
- 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.
- Angular v16
- RxJS Library v7 used to subscribe to input data observable.
- Angular Forms Module v16 used for form entry.
- Run
ng serve
for a dev server. Navigate tohttp://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.
- 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);
}
}
- Angular animations library used to make data entry more interesting.
- Status: Working.
- To-Do: Nothing
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@gmail.com