Search Posts

Category: angular-material

How to add id/name top

I am using to display an alert asking user to confirm his submission. I want to add id/name to Yes and No buttons in $mdDialog. Can anyone tell me the solution to add id/name fields. var confirm = $mdDialog .confirm() .title(‘Submit Confirmation’) .textContent( ‘Are you sure you want to submit this invitation?’) .ariaLabel(‘Lucky day’).targetEvent(ev).ok( ‘YES’).cancel(‘NO’); $mdDialog .show(confirm) .then( function() {}, function() {}); Thanks, Java4you. Source: AngularJS

Image not display on UI

I am using Angularjs 1.6 and angular-material 1.1.5 and we are work on angular component base. I want to set image and it’s src is from project folder. <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script> <div layout=”row”> <div flex> <md-toolbar class=”md-tall”> <div class=”md-toolbar-tools”> **<img width=”40″ alt=”image” src=”../img/logo.png” style=”max-height: 73.0px; width: 40px;”>** </div> </md-toolbar> </div> <div flex=”30″> <md-toolbar class=”md-tall”> <div class=”md-toolbar-tools”> <md-button class=”md-raised md-warn”>Sign Up</md-button> <md-button class=”md-raised md-warn”>Sign In</md-button> </div> </md-toolbar> </div> </div> But it’s give me error on […]

md-input-container display not correct with textarea and placeholder

I am working with angular material (v1.1.1 and v1.5.8 of angular) and I am trying to use md-input-container with the placeholder transclude and one textarea element. The problem is the placeholder is always on the top of the element which is not the result i want to obtain. I’ve found this github issue with a plnkr inside which demonstrate the exact problem. It’s said to be fixed but the bug is still live on 1.1.1 […]

Angular materials autocomplete

I am trying to autocomplete my form using Angular materials. Here, I want to autocomplete the input form. For the suggestions to be displayed, I want to display the names of the stock names and symbols. I am getting the stock data from the following API: http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=A Whenever I type a new alphabet, the new text is taken and the new text is passed to the searchTextChange function in my code. The searchTextChange function makes […]

Angular/Material mat-table provide feedback while remote DataSource data is loading

I’ve got a mat-table working – with data being loaded by a subclass of DataSource. My DataSource subclass is retrieving remote data from an API. I’d like to either hide the table or somehow add some special message within its empty ‘shell’ while the table data is being loaded. I tried using an ngIf to hide the table while data is loading and show it when the data has finished loading … <mat-table #table [dataSource]=”dataSource” […]

Angular Material Design Flex Layout Options

I have recently started working on angular material flex layout. I explored different options and implemented as well.I have some confusion regarding Show & Hide options of angular material design. The code below will show the content just for large and extra large screens and will hide content for extra small, small and even for medium screens. <div class=”h3 secondary-text” hide-sm hide-xs hide-md> <b>{{myModel}}</b> </div> I want to understand the difference between reducing the size […]

DatePicker Set timeZone

Hi guys if the my firts time working with angular material, is there any way to set the time zone on the datepicker from angular material 2. Componen <mat-form-field> <input matInput [matDatepicker]=”picker” placeholder=”Choose a date”> <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> Source: AngularJS

Angular Material layout add row after every 4th column

Is it possible to add a new row after every fourth column using Angular Material Layout/ Flex ? We have to show these fixed width albums and show only 4 albums on a row. This was the code we used using bootstrap <div ng-repeat=”item in items ng-if=”$index % 4 == 0″ class=”row”> <div class=”col-xs-4″>{{ items[$index].id }} </div> <div class=”col-xs-4″>{{ items[$index + 1].id }}</div> <div class=”col-xs-4″>{{ items[$index + 2].id }}</div> <div class=”col-xs-4″>{{ items[$index + 3].id }}</div> […]

Next Page »