How to create checkbox tree in angular2

Basic Problem

• I am new to angular2 and wanted to create checkbox tree to get some understanding.
• I am achieved this by code shared in the question. Now I want is, when parent checkbox is checked. it should automatically check all children checkboxes.
• Also changing all the values in backend data available on service.

I tried a lot hence creating a lot of confusing code so now I have removed weird code and want to try it again with experts advice.
Please Help me thankyou

1-Made a class category

  export class Category {
  constructor(public text:string,public value:Boolean|Array<Category>=false,  
 public id:string="auto" ,public name:string ="auto" )
   {

}}

2-Made a service to provide data

  export class ProvideDataService{

  constructor() {

this.categories.push(this.cate1);
this.categories.push(this.cate2);
this.categories.push(this.cate3);

}

private categories: Array<Category> = [];

private date1: Category = new Category("Wood");
private date2: Category = new Category("Alumiam");
private date3: Category = new Category("Plastic");
private date1Array: Array<Category> = [this.date1, this.date2, this.date3];
private f1: Category = new Category("Chairs", this.date1Array);
private f2: Category = new Category("Tables", false, true, true, "t", "t");
private f3: Category = new Category("Bed", false, true, true, "b", "b");

private cate1Array: Array<Category> = [this.f1, this.f2, this.f3];

private cate1: Category = new Category("Furniture", this.cate1Array, true, true, "f", "f");
private cate2: Category = new Category("Medical", false, true, true, "m", "m");
private cate3: Category = new Category("Beauty", false, true, true, "be", "be");
}

3- Created Checkbox Tree Component.Following is TemplateUrl HTML File

 <!--Root Layer-->
 <ul *ngFor="let a of categories">
   <li>
     <sr-check-box-category [c]="a">Loading...</sr-check-box-category>
     <!--Second Layer-->
        <sr-check-box-tree *ngIf="onSwitch(a.value)" [categories]="a.value">Loading...</sr-check-box-tree>
   </li>
 </ul>

4-Created Checkbox component

@Component({
selector: 'sr-check-box-category',
styleUrls: ['./check-box-category.component.css'],
template: `
<input  [attr.id]="c.id" [attr.name]="c.name"  ng-checked='c.value' 
(change)="onCheckChanged(c.id,$event)"  type="checkbox" />  
  `
      })

   export class CheckBoxCategoryComponent implements OnInit {

   constructor(private service: SelectedCheckBoxesService) { }
  @Input() c: Category = null;

 }

5- Added CheckBox Tree Component in Parent Component

 @Component({
 selector: 'sr-search-bar',
 template:`
 <sr-check-box-tree [categories]="categories" [IsParentOn]="false"></sr-check-box-tree>`,

providers: [SelectedCheckBoxesService]
})

export class SearchBarComponent {

 private categories:Array<Category>=[];
 constructor(private service:SelectedCheckBoxesService) { 

  this.categories=this.service.Get();

 }

 }

`