logo
down
shadow

Angular JS Material mdMedia seems to be not working


Angular JS Material mdMedia seems to be not working

By : Chaos
Date : November 22 2020, 02:42 PM
I hope this helps . Found it!
mdMedia was not referenced in the scope (Issue on Github).
code :
$scope.$mdMedia = $mdMedia;


Share : facebook icon twitter icon
Angular Material Design: $mdMedia('gt-md') not working in html

Angular Material Design: $mdMedia('gt-md') not working in html


By : user3489086
Date : March 29 2020, 07:55 AM
seems to work fine After looking at the link posted by @ExpertSystem adding the $mdMedia service to the $rootscope allowed me to use $mdMedia directly from my HTML code.
The problem arose because as $mdMedia is a service it is not available to the view unless it is available on the scope.
Angular 2 Services - $mdMedia

Angular 2 Services - $mdMedia


By : TRH
Date : March 29 2020, 07:55 AM
should help you out Is there an Angular 2 service that is similar to $mdMedia? I need to show or hide a button based on the size of the window (if the window is the same size as the screen, I want to hide it) , Maybe this could help you.
resize.service.js
code :
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class ResizeService {
    public window = new BehaviorSubject(null);

    constructor() {
        window.onresize = (e) => {
            this.window.next(e.target);
        };
    }
}
import {Component} from '@angular/core';
import {ResizeService} from './resize/resize.service';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    providers: [ResizeService]
})

export class AppComponent {
    constructor(private resizeService: ResizeService) {
        resizeService.window.subscribe((val) => {
            if (val) {
                console.log(val.innerWidth);
            }
        });

    };
}
There is no service in angular material 2! what is the equivalent for $mdMedia

There is no service in angular material 2! what is the equivalent for $mdMedia


By : James007
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Layout has been decoupled from Angular Material. For easy-to-use Angular-friendly media and layout tools, check out https://github.com/angular/flex-layout
Angular Material : alternative of $mdMedia('gt-md') in angular 4

Angular Material : alternative of $mdMedia('gt-md') in angular 4


By : Harri
Date : March 29 2020, 07:55 AM
I wish this help you It appears that you're mixing Material 1.x with Material 2.
Here is an example of how Material 2 works:
code :
<app>
  <md-sidenav-container>
    <md-sidenav align="left" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>
</app>
OpenLayers 5 | Angular 7 | Angular Material | Map is not working inside angular material mat-stepper

OpenLayers 5 | Angular 7 | Angular Material | Map is not working inside angular material mat-stepper


By : Morderash
Date : March 29 2020, 07:55 AM
like below fixes the issue I believe your issue is related to the content you're trying to attach the OLMap to being in the transcluded content of the mat-stepper or mat-step.
In the component lifecycle, the child component is not ready at the parent's OnInit step. Because you put the div you need inside of the mat component, it is being included in that component lifecycle instead.
code :
ngAfterViewInit() {
  this.map = new OlMap({
    target: 'map',
    layers: [this.layer],
    view: this.view,
  });
}
// html
<mat-horizontal-stepper ...>
  <mat-step ...>
    <form ...>
      ...
      <div #myMapRef id="map"></div>
      ...
    </form>
  </mat-step>
  ...
</mat-horizontal-stepper>

// parent ts
@ContentChild('myMapRef') // <-- if it's in a child component, your case should use this
@ViewChild('myMapRef') // <-- if it's in this component, your "this is working" would use this
myMap: ElementRef;

ngAfterViewInit() {
  console.log(this.myMap); // can get the ID from the ElementRef
}
Related Posts Related Posts :
  • angularjs WebAPI authentication project template
  • How to structure ui-router to have SEO friendly url structure
  • Dialog becomes blur after applying animation
  • ui-router State Children and Resolvers
  • Select2 not working in angular
  • How to properly convert controller and service from AngularJS to using ng-resource
  • Have some generator can gener angular component api document?
  • Is it possible to resend image url received from server back to it as an image after processing
  • When is "onEnter" exactly executed
  • Jasmine how do I set the response of a spy
  • How to use variable from a Controller in a Directive link function?
  • AngularJS - set validity of wrapped directives
  • How to show/hide different data on clicking different links in AngularJS?
  • can i paste text input value on-keyup in angular?
  • ui-view do not bind to controler
  • ng-keyup doesn't execute the expression
  • Angular not found until after it's needed?
  • learning angular, having issues with ng-options
  • Angularjs chat with strange polling
  • AngularJS - Adding controller files triggering uncaught error
  • Using the browser to navigate back in an angularjs app with ui-router?
  • ngResource query, get and save
  • NodeJS on Heroku: Push rejected, failed to compile Node.js app
  • Ionic / Angular JS calling the next page by passing a value into a funciton
  • AngularJS - Passing select list value to function returning undefined
  • directive does not work in the ons-toolbar
  • Making Anglular min/max validation code work for three variables on multiple fields
  • AngularJS: Add attribute, compile directive
  • Run part of controller code every time a page is navigated to in Ionic?
  • angular module: Failed to instantiate module due to
  • AngualrJS - What is a Modal
  • form valid ui-select AngularJs
  • Smart-Table vs. Angular-DataTables
  • angularjs clear backing field when input box hides
  • new google.maps.places.PlacesService throwing error
  • Can't route using angular-ui-router
  • $httpBackend.flush() method throws Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting
  • how print multipage with angularprint?
  • Why is 'this' different things in two different functions?
  • AngularJS - Page loads before scope variable is initialised
  • Angular module for moment-range
  • In AngularJS how do I open download pdf in new Tab on iPad browser using ng-click
  • Angular UI Grid API doesn't work in capturing last cell edit
  • Induce controller UI change from within directive with shared variable
  • Angularjs scope not working
  • AngularJS resource dependencies
  • Cannot inject an Angular ngModel in directive in Kendo Grid
  • In angular js 1.4.7 whether the object property/field name should start with string(number is not allowed)?
  • What are the best practices for consuming ASP.NET Web Api with oAuth in Ionic Framework?
  • Angularjs material dialog not working
  • Angular UI Router: UI Parent controller doesn't update when value changes
  • Print a matrix using angular js
  • unbind $scope param from var angular
  • ng-repeat multile fileds with multiple name like append
  • Get result of rest request instead of response?
  • req.body undefined and express api testing using angular
  • Simple ng-Route not working in ng-View
  • Angular filter for HTML formatting
  • AngularJS ACL view level examples
  • Angular Broadcast not working
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co