title: Angular 11 : Filter List of Objects with List of Objects via Pipe
body: <p>I have a FormControl and the top of the page where I can select objects (which I call 'Tags') in order to filter a List of other objects underneath it</p>
  <p>For example , I would select two object like so :</p>
  <pre><code>[
      {
          &quot;id&quot;: &quot;4&quot;,
          &quot;index&quot;: 4,
          &quot;isActive&quot;: false,
          &quot;picture&quot;: &quot;https://via.placeholder.com/20x20&quot;,
          &quot;name&quot;: &quot;Interest 4&quot;
      },
      {
          &quot;id&quot;: &quot;5&quot;,
          &quot;index&quot;: 5,
          &quot;isActive&quot;: false,
          &quot;picture&quot;: &quot;https://via.placeholder.com/20x20&quot;,
          &quot;name&quot;: &quot;Interest 5&quot;
      }
  ]
  </code></pre>
  <p>And then attempt to filter it against my list (which I call 'Posts') against the post.postTags property.</p>
  <pre><code>{
      &quot;id&quot;: &quot;RMjImD7Iy327rZOIBDfm&quot;,
      &quot;createdDate&quot;: &quot;07/17/2021 20:31:02&quot;,
      &quot;posterId&quot;: &quot;GI2Xs9YDV2UOh8M1J6zISvDt7wb2&quot;,
      &quot;posterName&quot;: &quot;example@email.com&quot;,
      &quot;title&quot;: &quot;New post with example email&quot;,
      &quot;bodyText&quot;: &quot;The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! \&quot;Now fax quiz Jack!\&quot; my brave ghost pled.&quot;,
      &quot;posterPicture&quot;: &quot;../../../../../assets/images/user/wip-avatar.png&quot;,
      &quot;postTags&quot;: [
          {
              &quot;id&quot;: &quot;4&quot;,
              &quot;index&quot;: 4,
              &quot;isActive&quot;: false,
              &quot;picture&quot;: &quot;https://via.placeholder.com/20x20&quot;,
              &quot;name&quot;: &quot;Interest 4&quot;
          },
          {
              &quot;picture&quot;: &quot;https://via.placeholder.com/20x20&quot;,
              &quot;id&quot;: &quot;7&quot;,
              &quot;name&quot;: &quot;Interest 7&quot;,
              &quot;isActive&quot;: false,
              &quot;index&quot;: 7
          },
          {
              &quot;id&quot;: &quot;2&quot;,
              &quot;name&quot;: &quot;Interest 2&quot;,
              &quot;isActive&quot;: false,
              &quot;index&quot;: 2,
              &quot;picture&quot;: &quot;https://via.placeholder.com/20x20&quot;
          }
      ]
  }
  </code></pre>
  <p>Screenshot of list console.log
  <a href="https://i.stack.imgur.com/jVjHp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jVjHp.png" alt="List" /></a></p>
  <p>My current filterPipe looks like this :
  <a href="https://i.stack.imgur.com/btnGo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/btnGo.png" alt="Pipe" /></a></p>
  <p>but so far unable to figure the correct logic out.
  I want the logic to be able to:</p>
  <ul>
  <li>Filter any posts which possess any (one or more) of the selected tags in the Posts postTags field.</li>
  <li>Return original list if no tags are selected.</li>
  </ul>