https://stackblitz.com/edit/angular-gd5gcg?file=app/dialog-overview-example-dialog.html
In this example of the official documentation, I see that the value returned when you close the matdialog is this
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
But what happens if you want to send a value calculated in a function previously for example like this
getData(){
this.datos=[1,2,3,4];
}
How can you make that function be called before returning the value to the component that opened the matdialog?
Thanks
The solution is quiet simple
<button mat-button (click)="getData()" [mat-dialog-close]="data.animal"
Thanks
Related
Below web-link demonstrates the routerLinkActive id working when used as a boolean value for a distinct HTML element' [ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts
In contrast the routerLinkActive id is not working with #angular/material instance below web-link, but the error disappears by commenting lines 5 and 6 , however not rectifying the usability of routerLinkActive id:
https://stackblitz.com/edit/mat-routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html
your second link has a lot of issues, the app-nav is not even used, so "commenting lines" is not enough to make it work..
but anyway
there is no issue with routerLinkActive, the problem is :
<button mat-button color="white" fxHide.xs *ngIf="true">
<span>
<a routerLink="city-list" routerLinkActive="active-link citNgClassList" #rla_clist="routerLinkActive"
[routerLinkActiveOptions]="{exact: true}">
<mat-icon class="mr">maps_home_work</mat-icon>
Cities
</a>
</span>
</button>
your link is inside a button..
remove the button, keep the "a" and it works
and what's the point of *ngIf="true" ?
Edit :
you can keep the button and remove the 'a' if you want to keep the button style (but it's bad usability wise to display link as button..), just put routerLink, routerLinkActive & routerLinkActiveOption on the button directly
Thanks, JiBi , for your observations. Indeed stripping off the material button wrapper of the links does not longer gives an error on the second StackBlitz link line 5 span , but it hurts to the over all page with styling in a bad way that breaks the harmony of the page that is not easy to substitute. I have removed some of the comments , that were left in place to give an easy idea of what I have tried.
The *ngIf= "true" of the buttons was meant to be a *ngIf= "!rla_clist" or *ngIf= "!rla_cform" so the button sender to the link will not displayed if I am on the link itself ,.....but this is another problem of which better solution I am awaiting.
I'm experimenting with ZAF V2 and ran into some issues, I'm using the app scaffolding at: https://github.com/zendesk/app_scaffold. I've been looking at documentation and tutorials the last few days with no luck.
I have two files:
form.hdbs
<form id="myForm">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
<button class="btn" id="sendBtn">Submit</button>
</form>
Hello {{name}}
and index.js:
import ZAFClient from 'zendesk_app_framework_sdk';
import View from 'view';
var client = ZAFClient.init();
const view = new View();
view.switchTo('form');
$('#sendBtn').on('click', function (e) {
e.preventDefault();
var name = $("#name").val();
view.switchTo('form', {
name: name
});
});
The first time I run the app and type a name / submit, the view reloads and the message shows Hello xxx, the second time I type in a name and hit submit, the app goes blank, no errors in console.
Has anyone run into this issue?
Any insight is greatly appreciated.
Likely what happened is, the click event fired which rendered the page as you would expect but then the form submits to an empty page. You'd need to avoid the form rendering as well.
This is a "fancy hello world" style app. Most probably once you start actually building a useful app you won't build it like this anyway :)
In JS/HTML it's common to have things like <a onclick="func(event)">, how do I reference the event variable when I'm using dart? I get an error when I try to do this saying that event is not found.
A more complete example:
<input id="foo" type="text" on-change="itChanged($event)">
In the Dart file:
itChanged(Event event) {
print(event.target.id);
}
Ok, after some research it turns out you have to use $event.
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com
I'm displaying some form data in a jquery dialog. Everything works fine when I do this the first time. I can see the "my value" string in the dialog. If I reopen the dialog again for the second time the form value is no longer visible. Check out this jsfiddle to try it out yourself. This is the code:
var dialog;
$("#b1").click(function(){
dialog = $("<div></div>").html("<p><input id='input1' type='text'></p>").dialog({
autoOpen:false,
});
$("#input1").val("my value");
dialog.dialog("open");
});
This bug only happens when I add the html tags dynamically. If I use a static html block everything works fine. Any idea what is wrong here? Thanks!
That is because you are not destroying the old
<input id='input1' type='text'>
so when you call
$("#input1").val("my value");
it sets the value of first
<input id='input1' type='text'>
it finds in the DOM.