Call one component from another component

Question

I am working on a project where I have defined two separate components. I want to the call the second component from inside the first component function which executes when a user clicks on a button. I don't want to use routing for the second component since, it's an extension of the first component. I don't want the user to directly access the second component by typing the URL, let's say www.example.com/secondcomponent that's why I am not using routing for this purpose. I only want the user to be able to access the first component say, www.example.com/firstcomponent which then on doing certain things takes the user to another component which isn't a route. How can I do that? I don't want to the call the second component's function. I want to call the entire second component including its HTML.

Here's my code:

HTML

      <tbody>
        <tr *ngFor = "let cDisplay of displayData; let i = index">
          <td>
            {{+ i + 1}}
          </td>
          <td>
            {{cDisplay.name}}
          </td>
          <td>
            {{cDisplay.author}}
          </td>
          <td>
            <button id = "btnModified" class = "btn btn-outline-light" 
                    (click) = "selectData(cDisplay.name)" type="submit" name="button">         
                     <i class="bi bi-play-btn"></i> 

            //Here when a user clicks on button a function gets executed

            </button>
          </td>
        </tr>
      </tbody>

TS

selectData(name: string)
{
  this.username = name;
  console.log(this.username);

  //Here I want to call the second component, I don't know how to call 
  //another component without a route in a TS function.
}

Answer 1

Just to be more explicit about what @Pankaj Prakash suggested, here is an example of how this is commonly achieved (if I understand you correctly).

I've shortened your code just for the purposes of this example, and am just using app-second-component as the selector for your second component.

HTML

<td>
  <button (click)="selectData(cDisplay.name)" type="submit" name="button">         
    <i class="bi bi-play-btn"></i> 
  </button>
  <app-second-component *ngIf="showSecondComponent"></app-second-component>
</td>

TS

public showSecondComponent = false;

constructor() {} // just using this to indicate the positioning of the declaration above

selectData(name: string)
{
  this.username = name;
  console.log(this.username);

  this.showSecondComponent = true; // Can toggle if you want obviously
}

This will display the second component inside your first one, which as I understand it is what you are looking for.

---

Now you did use the word "call" which might imply that you want to invoke a member method of SecondComponent . Just in case, that can be achieved like so:

TS

@ViewChild(SecondComponent) secondComponent: SecondComponent;

constructor() {}

selectData(name: string)
{
  this.username = name;
  console.log(this.username);

  this.secondComponent.doSomething();
}

Important: the above example only works if app-second-component is present in the template and is rendered (ie if you are still using an *ngIf it must be true ).