0

My issue is I would replace/hide some child components (Child1, 2 and 3) by a "subchild component" each time the toggleSubChild() function is called using @Output decorator (it's just an idea, maybe there's better way to do that); So each time the subChild is called then it delete the Child1, 2 and 3 from the parent component using the EventEmitter value open/close. So the hierarchy is Parent ==> Child1 2 and 3 ==> SubChild I hope I'm clear enough..if not feel free to ask..thanks in advance for the help..

parent.html:

<div><button (click)="toggleChild"></button>
  <div [hidden]="hideMePartially">
   <child1 [toggleMe]="toggleVar"></child1>
   <child2 [toggleMe]="toggleVar"></child2>
   <child3 [toggleMe]="toggleVar"></child3>
  </div>
</div>

parent.ts:

toggleChild() {
    this.toggleVar = !this.toggleVar;
}

child1.html:

<div ngIf*="toggleMe">
 <button (click)="toggleSubChild"></button>
 <subChild [hideMePartially]="hideItUp"></subChild>
<div>

child1.ts:

@Input() toggleMe: boolean;
@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();

 toggleSubChild() {
     this.hideMePartially = !this.hideMePartially;
     if (this.hideMePartially) {
       this.open.emit(null);
    } else {
      this.close.emit(null);
    }
    console.log(open);
    console.log(close);
   }

subChild.html:

<span *ngIf="hideMePartially">Some content</span>

subChild.ts:

@Input() hideMePartially: boolean;
Emile Cantero
  • 1,943
  • 3
  • 22
  • 47
  • It's quite a nested Parent child relationship, for cases like this you can go with redux or shared services that will be easier to manage and more cleaner . you will find info on both the topics [here](https://rahulrsingh09.github.io/AngularConcepts/#/faq) They have dedicated quiestions listed – Rahul Singh Jul 24 '17 at 16:29
  • @Rahul Singh yes you right I was looking for Redux ... thanks for help I will read your topics with attention – Emile Cantero Jul 24 '17 at 17:00
  • 1
    if any suggestions are required please comment there i wil be glad to help – Rahul Singh Jul 24 '17 at 17:05
  • @RahulSingh I found the topics very very interesting and I am trying to implement ngrx/store to my app ..but actually I can't realise in wich way it will help me to manage the issue in my post..maybe you could show me an appropriate exemple for my UI components? – Emile Cantero Jul 25 '17 at 09:18
  • 1
    what ngrx does is all the data will be stored in a single place instead of you passing it down the parent and child and its child . you just have to pass the data to the store once updated . the store will emit values which will notify the child or its child where ever you have subcribed to your store – Rahul Singh Jul 25 '17 at 09:20
  • Ahright I found this topics very helpful : https://gist.github.com/btroncone/a6e4347326749f938510 , https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b – Emile Cantero Jul 25 '17 at 09:25
  • @RahulSingh did I need to import the library to use it? I see anywhere kind of "npm install ngrx" or is it native to angular? – Emile Cantero Jul 25 '17 at 10:11
  • you need to install ngrx `npm install @ngrx/core @ngrx/store@2.2.3 --save` – Rahul Singh Jul 25 '17 at 10:12
  • @RahulSingh are you sure I should use that one because as I can see ngrx4 is out now? As I can see in the link bellow: https://github.com/ngrx/platform/blob/master/MIGRATION.md , https://blog.angular.io/announcing-ngrx-4-87df0eaa2806 – Emile Cantero Jul 25 '17 at 10:16
  • yes i know ngrx 4 is out but still i have not seen people use it that often and i am still getting to grips with some of their changes will update it soon – Rahul Singh Jul 25 '17 at 10:18
  • Ahright ahright – Emile Cantero Jul 25 '17 at 10:19
  • @RahulSingh I tried to inject the store in one of my componenent (child1) I follow theses steps: https://github.com/ngrx/platform/blob/master/docs/store/README.md then just after my constructor I did constructor(private store: Store) { this.counter = store.select('counter'); } and I have an error: "'counter'" is not assignable to parameter of type '(state: Appstate)' => boolean ...maybe i could create another post if you like? – Emile Cantero Jul 25 '17 at 12:37
  • I didn't get u you want another poat – Rahul Singh Jul 25 '17 at 12:46
  • @RahulSingh here is my new post: https://stackoverflow.com/questions/45304107/issue-implenting-the-ngrx-store-service-into-my-component – Emile Cantero Jul 25 '17 at 12:58
  • you are doing it wrong right increment decrement can be used in boolean type right – Rahul Singh Jul 25 '17 at 13:16
  • @RahulSingh could you provide me an exemple for my case? – Emile Cantero Jul 25 '17 at 13:19
  • 1
    you need to make the reducer a boolean where intial state will be true then on action set the state to false and then observe its value . and then just do a store.select('counter'); – Rahul Singh Jul 25 '17 at 13:23
  • @RahulSingh thanks I am trying this ! Should I do this in my counter.ts or directly in my component template? – Emile Cantero Jul 25 '17 at 13:26
  • @RahulSingh or maybe should I create another file, Something like boolean.ts? – Emile Cantero Jul 25 '17 at 13:31
  • @RahulSingh think I gotcha..I should update my counter.ts with `ActionReducerMap` it actually look like this (updated post) : https://stackoverflow.com/questions/45304107/issue-in-implementing-the-ngrx-store-service-into-my-component – Emile Cantero Jul 25 '17 at 13:33

0 Answers0