title: Is there a way in angular (unit testing) to find a component by its @Input() property values?
body: <p>This question refers to angular unit tests. I'm searching for a short way to find components by the values, which they receive through their <code>@Input()</code> data binding.</p>
  
  <p>I have the following child component <code>MyComponent</code>. Which has an <code>@Input() property called</code>id`:</p>
  
  <pre><code>@Component({
      selector: 'my-component,
      template: `... something ...`
  })
  class MyComponent {
      @Input() id: string;
  }
  </code></pre>
  
  <p>I use this component inside a <code>ParentComponent</code> and pass different <code>ids</code> through the <code>@Input()</code> property:</p>
  
  <pre><code>...
  &lt;my-component [id]="first-comp"&gt;&lt;/my-component&gt;
  &lt;my-component [id]="second-comp"&gt;&lt;/my-component&gt;
  ...
  </code></pre>
  
  <p>Now I have a unit test for the <code>ParentComponent</code>. If I want to find the two components by their <code>id</code> I'm doing this:</p>
  
  <pre><code>let firstComponent: MyComponent;
  let secondComponent: MyComponent;
  
  const myComponents = debugElement.query(By.css('my-component'));
  for (const myComponent of myComponents) {
      if (myComponent.componentInstance.id === 'first-comp') {
          firstComponent = myComponent.componentInstance;
      } else if (myComponent.componentInstance.id === 'second-comp') {
          secondComponent = myComponent.componentInstance;
      }
  }
  </code></pre>
  
  <p>This code is not very easy to write. Does angular provide a function like, to do this in an easier way without the for-loop? Something like this:</p>
  
  <pre><code>const firstComponent = debugElement.query(By.css('my-component[id="first-component"]'));
  const secondComponent = debugElement.query(By.css('my-component[id="second-component"]'));
  </code></pre>
  
  <p>Thank you for your help.</p>