How to create simple input text to search in AngularJS material design?

Question

I'm looking for an easy way to get something similar to what is available in angular -mdl for an extensible search text box, as shown below. This will add a click search button, it will expand to a text field.

<!-- Expandable Textfield --> <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="sample6"> <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label> </div> </div> </form> 

My requirement is to have such a search button in the map header, clicking on the right when the user clicks it, it must expand to enter the input. And I need to do this in angular Material.

Any inputs or help ..! Thanks.

Answer 1

I was looking for an example of extensible search in Angular with Material, too, and found this code in Codepen, but I'm not sure if it is exactly what you are looking for, it opens full-size input using the back button ...

http://codepen.io/kyleledbetter/pen/gbQOaV

The HTML toolbar looks something like this:

 <md-toolbar ng-show="!showSearch"> <div class="md-toolbar-tools"> <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu"> <ng-md-icon icon="menu"></ng-md-icon> </md-button> <h3> Dashboard </h3> <span flex></span> <md-button aria-label="Search" ng-click="showSearch = !showSearch"> <ng-md-icon icon="search"></ng-md-icon> </md-button> <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> <ng-md-icon icon="more_vert"></ng-md-icon> </md-button> </div> </md-toolbar> <md-toolbar class="md-hue-1" ng-show="showSearch"> <div class="md-toolbar-tools"> <md-button ng-click="showSearch = !showSearch" aria-label="Back"> <ng-md-icon icon="arrow_back"></ng-md-icon> </md-button> <h3 flex="10"> Back </h3> <md-input-container md-theme="input" flex> <label>&nbsp;</label> <input ng-model="search.who" placeholder="enter search"> </md-input-container> <md-button aria-label="Search" ng-click="showSearch = !showSearch"> <ng-md-icon icon="search"></ng-md-icon> </md-button> <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> <ng-md-icon icon="more_vert"></ng-md-icon> </md-button> </div> </md-toolbar> 

Answer 2

It looks like there is no clean source version of angular for this, so I used one of the text field options from the 'material design library lite' - the extensible search button gif-demo