New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ng-mat-search-bar

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-mat-search-bar

The component creates a search-icon which expands a search-field on click. See the demo for the effect: ![NgMatSearchBar demo](https://raw.githubusercontent.com/tommueller/ng-mat-search-bar/master/docs/demo.gif)

  • 12.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.5K
increased by22.2%
Maintainers
1
Weekly downloads
 
Created
Source

NgMatSearchBar

The component creates a search-icon which expands a search-field on click. See the demo for the effect: NgMatSearchBar demo

Installation

Install the dependency via npm:

npm install ng-mat-search-bar --save

or yarn

yarn add ng-mat-search-bar

and import the module into your apps app.module.ts like this:

import { NgMatSearchBarModule } from 'ng-mat-search-bar';

...

@NgModule({
  ...,
  imports: [
    ...,
    NgMatSearchBarModule
  ],
  ...
})

Also make sure that in your app.module.ts you import the BrowserAnimationsModule, otherwise the animations will not work!

You also need to add Material Icons webfont by adding

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

to your index.html.

Usage

You can use the component with its selector:

<mat-search-bar></mat-search-bar>

Events

You can subscribe to the different events the component is outputting:

  • onBlur: fired when the search-field looses focus
  • onClose: fired when the user closes the searchfield by clicking the close-button
  • onEnter: fired when user presses enter-button in search-field
  • onFocus: fired when user focuses the search-field
  • onOpen: fired when the searchbar is shown

Methods and properties

It also offers two public methods to open / close the searchbar:

  • open(): opens the searchbar
  • close(): closes the searchbar

and a property:

  • searchVisible: which holds the current visibility state of the search-input

Reactive forms

You can use it with ReactiveFormsModule, by passing a FormControl as input: e.g

...
<mat-search-bar [formControl]="control"></mat-search-bar>
...

and in .ts file:

  ...@Component({})...
    control: FormControl = new FormControl('');
  ...

Autocomplete

You also can use it combined with Angular Materials autocomplete (https://material.angular.io/components/autocomplete/overview). Just use it as described in the Angular docs and use the mat-search-bar as the input for it. Also you can check the app.component.html/.ts for example code: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

Contributions

Please don't hesitate to file an issue or send in a PR if you have any improvements or found bugs.

FAQs

Package last updated on 11 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc