title: How to pass variable from one component to another component and print that variable in 2nd Component template html file?
body: <p>I am having a dashboard which has list of groups the logged in user is. Now as user clicks on any of the group, basic information of the group like name, description etc are printed on the right side of the page.It is something like this.<a href="https://i.stack.imgur.com/bWAQ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bWAQ4.png" alt="enter image description here"></a></p>
  
  <p><strong>HomeComponent</strong> has child component called <strong>GroupComponent</strong>. I am trying to pass the group object from HomeComponent to GroupComponent which will print the name of it. Below is the code which I have tried:</p>
  
  <p><strong>routes.ts</strong></p>
  
  <pre><code>export const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {
      path: 'home', component: HomeComponent, canActivate: [AuthGuard],
      children: [
        {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
        {path: 'group', component: GroupComponent},
        {path: 'dashboard', component: DashboardComponent}
      ]
    }
  ];
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>export class HomeComponent implements OnInit {
    user: string;
    user_id: number;
    group_list: string[];
  
    constructor(public router: Router, private _groupService: GroupService) {
      // xyz code
    }
  
    ngOnInit() {
    }
  
    getUserGroups() {
      let body: string = '{}';
      this._groupService.getAllUserGroups(body).subscribe(
        auth =&gt; {
          let payload = auth.json();
          this.group_list = payload.list;
        },
        error =&gt; {
          console.log(error);
        }
      );
    }
  
    goToGroupDetail(group) {
      console.log(group.id);
      let groupObj = new GroupComponent(group.name);
      this.router.navigate(['/home/group']);
    }
  
  }
  </code></pre>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li *ngFor="let group of group_list"&gt;&lt;a  (click)="goToGroupDetail(group);"&gt;{{group.name}}&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  </code></pre>
  
  <p><strong>group.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'app-group',
    templateUrl: './group.component.html',
    styleUrls: ['./group.component.css']
  })
  export class GroupComponent implements OnInit {
    group_name:string;
  
    getGroupName(): string {
      return this.group_name;
    }
  
    setGroupName(value){
      this.group_name = value;
    }
  
    constructor(name:string) {
      this.setGroupName(name);
    }
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>group.component.html</strong></p>
  
  <pre><code>&lt;p&gt;
    group works!
  &lt;/p&gt;
  &lt;div class="col-md-6"&gt;
    &lt;h2&gt;Name of the Group : {{group_name}}&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting this kind of error : 
  <a href="https://i.stack.imgur.com/8qfkn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8qfkn.png" alt="enter image description here"></a></p>