Following my previous question, ngFor length in Angular 5, I was able to fix the error in the previous question.
Now I have a list of checkboxes in which I want to uncheck the selected checkbox by on its label click. Something like this: https://run.plnkr.co/plunks/5WkoJK/.
Below is my code
categories.component.html
X
{{category}}
categories.component.ts
import { Component, NgModule, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Feeds } from '../shared/services/feeds';
import { FeedsService } from '../shared/services/feeds.service';
import { Categories } from '../shared/services/categories';
import { CategoriesService } from '../shared/services/categories.service';
import { MyService } from '../shared/services/my-service.service';
import { Pipe, PipeTransform } from '@angular/core';
import { FilterPipe } from '../shared/pipes/category-type.pipe';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit {
categories: Categories[];
feeds: Feeds[];
myarray = [];
myobj = {
'categories': this.myarray
};
searchText = '';
selected_count = 0;
constructor(private categoriesService: CategoriesService, private myService: MyService) {
}
ngOnInit() {
this.getCategories();
}
clearFilter() {
this.searchText = '';
}
// Clearing All Selections
clearSelection() {
this.searchText = '';
this.categories = this.categories.filter( g => {
g.checked = false;
return true;
});
}
deleteCategory(category) {
this.searchText = '';
const index = this.myarray.indexOf(category);
this.myarray.splice(index, 1);
this.categories = this.categories.filter(name => name !== category);
}
getCategories(): void {
this.categoriesService.getCategories().subscribe(categories => this.categories = categories);
}
getCategoryFeeds(myobj): void {
this.categoriesService.getfeedsByCategories(myobj).subscribe( feeds => { this.myService.change(feeds); });
}
check(category, event) {
if (event.target.checked) {
this.myarray.push(category);
this.getCategoryFeeds(this.myobj);
} else if (!event.target.checked) {
const index = this.myarray.indexOf(category);
this.myarray.splice(index, 1);
this.getCategoryFeeds(this.myobj);
}
if (!event.target.checked && this.myarray.length === 0) {
this.myService.loadAll();
}
}
}categories.ts
export class Categories {
category_name: string;
checked: false;
}Once I click on any checkbox It gets added into myarray Array
I am bit confused on the deleteCategory function. When I try to click on the label on the bottom of the checkbox list. Instead of unchecking the checked checkbox it deletes the checkbox itself.
I followed this example: Angular 9|8 + TypeScript: Create a filter list with checkboxes to select from a list
It’s a bit different from my code. How can I fix it?
