title: Handle DOM events in Angular 4
body: <p>I am new to Angular and trying to understand what is the best approach to handle DOM events in Angular similar to what we use to do in jQuery. For example, in the HTML code below, I would like to add a new CSS class named <code>open</code> to all sections with class <code>filter-section</code> when <code>btnfilter</code> button is clicked - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;aside class="filter ng-scope" id="search-filters"&gt;
                      &lt;button class="btn btn-filter in" id="btnfilter"&gt;
                          &lt;i class="ico ico-collapsed"&gt;&lt;/i&gt;
                          &lt;i class="ico ico-expand none"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;section class="refine filter-section"&gt;
                          &lt;span class="sub-title" title="Filter"&gt;
                              &lt;i class="ico ico-gr-filter"&gt;&lt;/i&gt;
                              &lt;span class="title none"&gt;FILTERS&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/section&gt;
  &lt;section class="refine filter-section"&gt;
                          &lt;span class="sub-title" title="Filter"&gt;
                              &lt;i class="ico ico-gr-filter"&gt;&lt;/i&gt;
                              &lt;span class="title none"&gt;FILTERS&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/section&gt;
   &lt;/aside&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In jQuery, we could have done something like below -</p>
  
  <pre><code>  $('#btnfilter').click(function () {
        $(this).find('.filter-section').addClass('new-class');
    });
  </code></pre>
  
  <p>I would like to know the Angular way of achieving the same. Please advise.</p>