Custom Filters with Angular

Objectives

  • Explain why we need custom filters
  • Create a custom filter

What are some filters that are native to Angular?

Why would we need anything else?

We often will need to create custom filters to format data to meet our specific needs

What does that look like?

app.filter('nameOfFilter', function () {
  return function (input) {
    // DO STUFF TO THE INPUT
  };
});

So, what would a native Angular filter look like 'under the hood'?

Let's write the code together to see what Angular's uppercase filter might look like

uppercase

Implement a "Scene" filter

  • Replace all 'e's with '3's
  • Replace all 'i's with '1's
  • Replace any 'and' with two ampersands
  • Add 'rawrr' to the very end

Hot Topic and Spencer's are my favorite stores.

Hot Top1c && Sp3nc3r's ar3 my favor1t3 stor3s. Rawrr

custom-filters

By Dize Hacioglu

custom-filters

  • 146