Question: I am writing a code in which I want to filter different categories using isotope in html website using js. I have written the code for filtering and it works fine. When I load the website then all the images are shown. I want to have a particular category selected at the start.

code-

```
window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item'
      });

      let portfolioFilters = select('#portfolio-flters li', true);

      on('click', '#portfolio-flters li', function(e) {
        e.preventDefault();
        portfolioFilters.forEach(function(el) {
          el.classList.remove('filter-active');
        });
        this.classList.add('filter-active');

        portfolioIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });
        portfolioIsotope.on('arrangeComplete', function() {
          AOS.refresh()
        });
      }, true);
    }

  });

```

html code-

```
 <li data-filter=".filter-cof">Clip On Frame</li>
      <li data-filter=".filter-ib">Inshop Branding</li>
      <li data-filter=".filter-pf">Photo Frame</li>

```

Answer: 
You can access the input itself and set the type:

HTML:

```
<p-inputNumber #input [(ngModel)]="newExpenseAmount" [style]="{width: '100%'}" mode="currency" currency="EUR" locale="es-ES"></p-inputNumber>

```

Class:

```
@ViewChild('input') public input: InputNumber

public ngAfterViewInit(): void {
    (this.input.input.nativeElement as HTMLElement).setAttribute("type", "tel");
}

```
You can use **ngx-mask**

<https://www.npmjs.com/package/ngx-mask>.

`<input nbInput fullWidth mask="000000000" placeholder="4XXXXXXXX" maxlength="9" />`

Examples : <https://jsdaddy.github.io/ngx-mask-page/main>