title: Angular 4 DOM Manipulation and Search
body: <p>Angular has <a href="https://angular.io/api/core/Renderer2" rel="nofollow noreferrer">these</a> for DOM manipulation but I'm contemplating using jQuery for these functions: closest()/children().</p>
  
  <p>So,
  Is there an angular function that is identical to jQuery's function closest() which basically just returns the element?</p>
  
  <p>Are there any alternatives for these functions in Angular without resorting writing native JS/TS operations to achieve those things just like jQuery, which does the dirty work? Or is alright to proceed with jQuery (I'm not dealing with template manipulation anyway)? Thanks. </p>
  
  <p><strong>Update</strong></p>
  
  <ol>
  <li>The window.getComputerStyle could easily replicate jquery's css().</li>
  <li>Regarding jquery's selector: <code>closest()</code></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="ample" #zero&gt;
    &lt;div id="xample" #first&gt;
      &lt;div #x&gt;
      &lt;/div&gt;
      &lt;div #y&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to know what could be an alternative operation for Angular. I could only think of making a function that traverses upward which jquery already does -give or take the DIVs and the element id are dynamically added/changed/deleted. </p>
  
  <p>For example, from #y I want to know its nearest parent with an ID of ample. We know that the target element has a selector of #zero but retrieving it from div #y will take DOM traversal (which jquery simplifies using closest()) or some mapping/array operations that sorts out relations of the element which may be arduous in some point. </p>