I have a standard Angular Material Menu in a toolbar...
<button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
<mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
<mat-menu #vidmenu="matMenu">
<button mat-menu-item>
<img src="assets/images/vid_welcome.jpg" height=40px/>
<span> Welcome</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video1.jpg" height=40px/>
<span>Video 1</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video2.jpg" height=40px/>
<span>Video 2</span>
</button>
</mat-menu>
In testing, users are not seeing the material menu icon no matter how large we make it. One user suggested we start the experience off with the menu open... that way they can see the choices, click on one, and the menu closes. Then they will know it's there for future use.
I have researched remotely triggering the click() to open it on during ngOnInit(), but all examples are in older angular versions, and even if I got it working, I'm guessing it will be buggy.
Is there a way to simply set a menu to a default state of being "open", and then just function normally from there?
Ensure you are using the following directive on the button which is used as the menu trigger on the UI.
<button
[matMenuTriggerFor]="menu">
</button>
<mat-menu #menu="matMenu">
...
</mat-menu>
Then in the .ts code of your component, ensure you have the following import:
import { MatMenuTrigger } from "#angular/material/menu"
Create the following property:
#ViewChild(MatMenuTrigger) adjustersMenuTrigger: MatMenuTrigger
Then finally to open the menu programmatically, use the following code:
this.adjustersMenuTrigger.openMenu()
Related
I would like to create a mat-select controls in mat-menu. In the documentation I don't see any examples with that scenario. I tried it out, and it seems to be working, the problem is when options are expanded, the menu disposes. How can I keep it open? Here is the tester I am working with
You need to stop event propagation ($event.stopPropagation()) on the menu item. Here's an example of how this can be done;
<div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()">
<mat-form-field>
<mat-label>Some label</mat-label>
<mat-select [formControl]="someFormControl">
<mat-option *ngFor="let item of someList" [value]="item.value">{{item.description}}</mat-option>
</mat-select>
<button type="button" mat-button matSuffix mat-icon-button (click)="someFormControl.setValue(null); $event.stopPropagation();" title="Clear">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
Also you probably want to disable ripple ([disableRipple]="true") so you do not get the ripple visual feedback that menu items normally have.
In my signature component, I am trying to pass two event emitters, and eventually a 3rd event emitter into it.
When there is one event emitter, it works as expected, when i have two event emitters none of the expected behavior is happening.
In my parent component,
<div>
<app-signature
(checkSubmitFlagForFirstSubmitEvent)=
"receiveCheckSubmitFlagForFirstSubmit($event)"
(myEvent)="confirmation.getStudentQuestionsData()"
></app-signature>
</div>
<div class="tab-pane fade show" id="confirmation" role="tabpanel" aria-
labelledby="cada-form-confirmation-tab">
<app-confirmation #confirmation></app-confirmation>
</div>
Am I missing something obvious here? For the (myEvent)="confirmation.getStudentQuestionsData()", when the user clicks a button on the signature component, it should call a function from the confirmation component.
In my signature component TS file:
#Output() myEvent = new EventEmitter();
function2() {
this.myEvent.emit(null)
}
In my signature component HTML file, I have a modal that pops up, when they click OK on the modal button, it should call a function from my confirmation component:
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" (click)="closeModal('submit-wait'); function2()">×</span>
</button>
In my confirmation component TS file, I'm trying to call the function getStudentQuestionsData() when the user clicks on a button from the signature component.
I am also calling it onInit, i dont think thats the cause of the issue though. I need the data when the app loads, and then when the user clicks on a button from signature component, it should call getStudentQuestionsData() again to refresh the data on the confirmation component.
ngOnInit() {
this.getStudentQuestionsData();
}
getStudentQuestionsData() {
'calling some API'
}
Currently your click event is inside of the span inside of the button. While your span is clicked it must not be bubbling the event up.
If you bind to the click event directly on the button it should start working better for you.
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close" (click)="closeModal('submit-wait'); function2()">
<span aria-hidden="true" >×</span>
</button>
I use this navigation in my Angular 5/Angular Materials application:
<!-- Navigation -->
<mat-toolbar color="warn">
<mat-toolbar-row>
<span class="nav-icon">
My Icon
</span>
<span class="nav-spacer"></span>
<button mat-button [routerLink]="['/home']">Home</button>
<button mat-button [routerLink]="['/login']">Login</button>
<button mat-button (click)="logout()">Logout</button>
</mat-toolbar-row>
</mat-toolbar>
<!-- Router Outlet -->
<router-outlet></router-outlet>
Actually I could not find how to set the active menu button active. Is there a way of doing this, e.g. with Route?
In Angular 6 you can add the routerLinkActive attribute to buttons. When the corresponding route is the current one, the content of this attribute will be added to the element's css classes.
For example:
<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
Home
</button>
When this button is clicked and the corresponding route becomes the active one, it will get the additional mat-accent CSS class.
Reference: Angular.io docs, Angular API docs
Hopefully, this helps someone the active class was not working for me I'm using Angular version 12.0.5
I replaced:
<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>
With:
<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>
CSS:
.activebutton
{
background-color: rgb(51, 51, 51);
color: white;
}
This solved my active button issues.
i want to make an onscreen Keyboard in dart with angular.js.
If one letter is pressed it should be on the html site.
How does it work?
This is what i´ve got in the index.html:
<button on-click="einsController.generateName()"id="z" class="button">Z</button>
<button on-click="einsController.generateName()"id="u" class="button">U</button>
<button on-click="einsController.generateName()"id="i" class="button">I</button>
<button on-click="einsController.generateName()"id="o" class="button">O</button>
<button on-click="einsController.generateName()"id="p" class="button">P</button>
<button on-click="einsController.generateName()"id="a" class="button">A</button>
<button on-click="einsController.generateName()"id="s" class="button">S</button>
<button on-click="einsController.generateName()"id="d" class="button">D</button>
<button on-click="einsController.generateName()"id="f" class="button">F</button>
<button on-click="einsController.generateName()"id="g" class="button">G</button>
<button on-click="einsController.generateName()"id="h" class="button">H</button>
<button on-click="einsController.generateName()"id="j" class="button">J</button>
<button on-click="einsController.generateName()"id="k" class="button">K</button>
<button on-click="einsController.generateName()"id="l" class="button">L</button>
<button on-click="einsController.generateName()"id="y" class="button">Y</button>
<button on-click="einsController.generateName()"id="x" class="button">X</button>
<button on-click="einsController.generateName()"id="c" class="button">C</button>
<button on-click="einsController.generateName()"id="v" class="button">V</button>
<button on-click="einsController.generateName()"id="b" class="button">B</button>
<button on-click="einsController.generateName()"id="n" class="button">N</button>
<button on-click="einsController.increment()"id="m" class="button">M</button>
This is where the letter shall appear:
<span id="badgeName">{{einsController.name}} </span>
this is the function in the dart File:
String name = '';
void generateName() {
name = "Q";
}
I still don´t get it. I think I need to change something in the method of generateName().
I want an onScreenKeyboard something like this http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774
Only that it I need to use dart Code.
The ng-click directive should be on the button where you click not on the tag where you want to show the result.
You don't need your query('#letter_A').onClick.listen(... when you use ng-click they have similar functionality.
You need to place the controller keyboard so that your buttons and the <div> where you want to show the output are within the tag where the controller is applied.
Try it and if it doesn't work update your question with the new code and I'll take another look.
I am trying to implement addthisevent into my jqm application (1.4), but I have two issues.
The Link/Button doesn't appear. Looking with Firebug shows that the css class isn't loaded as hidden.
After manually activating the visibility using firebug, the link doesn't do anything.
Does anyone have experience with integrating addthisevent into a jqm app? Is there anything I have to be particularly careful of?
Many thanks in advance.
It appears that the jQM CSS interferes with AddThisEvent CSS. One solution is to add data-role="none" to the link which tells jQM to leave the link alone and not to enhance it.
<a href="#" data-role="none" title="Add to Calendar" class="addthisevent" rel="external">
Add to Calendar
<span class="_start">10-05-2014 11:38:46</span>
<span class="_end">11-05-2014 11:38:46</span>
<span class="_zonecode">38</span>
<span class="_summary">Summary of the event</span>
<span class="_description">Description of the event</span>
<span class="_location">Location of the event</span>
<span class="_organizer">Organizer</span>
<span class="_organizer_email">Organizer e-mail</span>
<span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
<span class="_all_day_event">true</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Here is a DEMO