mat-checkbox check on method result - html

I have a mat-checkbox, and when I click it I show a mat-dialog component, and if the user clicks "confirm" I want the checkbox to become checked, if they press cancel, I want it to remain unchecked, how do I do this?
Here is the method that the checkbox calls when clicked:
onShowDialog(): void {
const dialogRef = this.dialog.open(ConfirmActionDialogComponent, {
width: '250px',
data: { title: 'Enable publish?'}
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
return true;
}
});
}
<mat-checkbox *ngIf="settingsChanged" (change)='onShowDialog($event)' formControlName="automaticallyPublish">Checkbox name</mat-checkbox>

Hi I would suggest using Primeng. They have a checkbox preset (I don't know what else to call it), that you can use for free. Here is the link:
https://www.primefaces.org/primeng/showcase/#/checkbox
They have sample code/projects that shows you how to use it.
Please note that you do have to install primeng, and here is a link to help you with that:
https://www.primefaces.org/primeng/showcase/#/setup
Hope that this works for you!

Related

How can I find the place in my code or page where the location is set?

I tried global event listeners pane in Chrome DevTools, I tried to put a debugger; inside document/window.addEventListener("unload", ...) and it is not working.
I tried to step over the statements in the file main.ts and nothing is breaking the code in there when I click on a link that should open another page than the one it is opening. I checked its HTML attributes and the correct URL is set in its href attribute. The link has a single class which is not used to open another page in the page's code as far as I know.
I also searched for all the places in my code where the (window.)location is changed.
I also updated npm packages using npm update.
I use KnockOut.js and I have this static HTML for the links that go to wrong pages:
<ul class="main-nav" data-bind="foreach: mainMenuItems">
<li>
<a data-bind="attr: { href: url, title: text }, text: text, css: { active: $data == $root.activeMenuItem() }"></a>
<div class="bg"></div>
</li>
</ul>
And this is a part of the TypeScript code (sorry for the ugly code, it is WIP):
let vm = new PageViewModel(null, "home", () => {
sammyApp = $.sammy(function () {
// big article URLs w/ date and slug
this.get(/\/(.+)\/(.+)\/(.+)\/(.+)\/(.*)[\/]?/, function() {
vm.language("ro");
vm.isShowingPage(false);
vm.isShowingHomePage(false);
let slug : string = this.params['splat'][3];
vm.slug(slug);
console.log('logging', { language: vm.language(), slug: vm.slug() });
vm.fetch();
vm.isShowingContactPage(false);
vm.activeMenuItem(vm.getMenuItemBySlug(slug));
});
// any other page
this.get(/\/ro\/(.+)\//, function () {
console.log('pseudo-navigating to /ro/etc.');
vm.language("ro");
vm.isShowingPage(true);
vm.isShowingHomePage(false);
let slug : string = this.params["splat"][0];
//slug = slug.substr(0, slug.length - 1);
if (slug !== 'contact') { // this page is in the default HTML, just hidden
vm.slug(slug);
vm.fetch();
vm.isShowingContactPage(false);
} else {
vm.isShowingContactPage(true);
window.scrollTo(0, 0);
}
vm.activeMenuItem(vm.getMenuItemBySlug(slug));
});
this.get(/\/en\/(.+)\//, function () {
console.log('pseudo-navigating to /en/etc.');
vm.language("en");
vm.isShowingPage(true);
vm.isShowingHomePage(false);
let slug : string = this.params["splat"][0];
//slug = slug.substr(0, slug.length - 1);
if (slug !== 'contact') { // this page is in the default HTML, just hidden
vm.slug(slug);
vm.fetch();
vm.isShowingContactPage(false);
} else {
vm.isShowingContactPage(true);
, () => {
uuuuucons
}9 function
window.scrollTo(0, 0);
}
vm.activeMenuItem(vm.getMenuItemBySlug(slug));
});
// the home page
this.get("/", function () {
console.log(`pseudo-navigating to /${vm.language()}/home`);
sammyApp.setLocation(`/${vm.language()}/home`);
});
});
sammyApp.run();
});
I have this code that catches the click event:
$("a").on("click", () => {
debugger;
});
But after this finding I do not know what I can do to find the source of the problem.
When the click is catched by the 3 LOCs above, I get this:
What could be the issue?
Thank you.
Update 1
After seeing these questions and their answers (the only thing I did not try was using an iframe):
How can I find the place in my code or page where the location is set?
Breakpoint right before page refresh?
Break javascript before an inline javascript redirect in Chrome
If I have a page for which I check the beforeunload and unload event checkboxes in the Event Listener Breakpoints pane in Chrome DevTools' tab Sources, and I click on a link which should not reload the page but it does, and the two breakpoints (beforeunload and unload) are not triggered in this process, what should I do next?
Is this a known bug? If so, can someone give me an URL?
Thank you.

primefaces p:textEditor tab/keyboard navigation doesn't focus the next UI component

We are using p:textEditor (based on quill editor) in our application and we have more UI components below p:textEditor. The problem is for accessibility, the user need to tab through the components in the page using keyboard; but when it comes to p:textEditor a tab acts as adding a tab(4 spaces).
The primefaces showcase here also has the same problem, how can we navigate to the submit button from p:textEditor using keyboard?
Thanks Kukeltje, I disabled the tab key in quill editor.
For anyone who wants to do the same, you have to edit the texteditor.js file under META-INF/resources/primefaces/texteditor/ (when you reverse engineer the primefaces-version.jar (version=6.1 in my case)) and add the below code in render: function()
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
For anyone who wants additional key customization can use the Quill Interactive Playground to validate your changes.

Angular2 e2e not accessing Boostrap modal element

I'm running some e2e tests on an Angular2 app. One test involves clicking a button to open a Bootstrap modal. Even though I simulate the click of the button in my e2e test, it seems I cannot access the modal.
I'm currently just trying to run a simple test to click the button, open the modal, and check the text in an h4 element within the modal.
app.po.ts:
import { browser, element, by } from 'protractor';
export class SolarUi4Page {
navigateTo() {
return browser.get('http://localhost:4200/');
}
getAddButton() {
return element(by.css('.icon-plus'));
}
//2nd and 3rd lines attempt to do the same thing. Neither work
getH4() {
//return element(by.css('main-page')).element(by.id('data')).getText();
//return element(by.css('add-validation')).element(by.tagName('h4')).getText();
return element(by.css('h4')).getText();
}
}
app.e2e-spec.ts:
import { SolarUi4Page } from './app.po';
describe('solar-ui4 main page', function() {
let page: SolarUi4Page;
beforeEach(() => {
page = new SolarUi4Page();
});
it('should add new value to array/table and display it', () => {
page.navigateTo();
let addButton = page.getAddButton();
addButton.click();
expect(page.getH4()).toEqual('Add Data Point');
});
});
app.component.html (contains three custom components):
<main-page></main-page>
<add-validation></add-validation>
<delete-validation></delete-validation>
I am able to access any element inside the main-page component via syntax like the first commented out line in getH4() method. It seems I cannot access anything from the add-validation element, which is my Bootstrap modal. I'm assuming it is because that HTML is not present on the page on load, but shouldn't addButton.click(); trigger the modal to open so it IS present?
You might need to wait for the popup to be visible via browser.wait():
var EC = protractor.ExpectedConditions;
var elm = element(by.css('h4'));
browser.wait(EC.visibilityOf(elm), 5000);
expect(elm.getText()).toEqual('Add Data Point');

ngDialog contents not clickable?

I am using ngDialog dialog box for my mean.js application with the following call :
ngDialog.open({
template: 'modules/users/views/userDetails/dialog.client.view.html',
scope: $scope,
closeByDocument :false
});
Now, the dialog is opening fine and all the elements in it are also visible.
But I am not able to perform any any action on them.i.e., click a button or type in a text field. It feels like the whole dialog box is out of focus.
What is it that I am doing wrong here?
Note : Angular Animate might be disabled in my application by the following code :
$timeout(function () {
return $animate.enabled(false, angular.element(".carousel"));
});
But, the above code is in another controller.
Could this be the reason for the failure?
I solved the problem by changing the css a bit:
.ngdialog-overlay {
z-index: -1;
}

Pressing the href link has no action

I use this script to create a pull down box, works perfectly excepting a single thing. If i add a link in that box, pressing it will result in no action. Shortly the links don't work in this script.
Could anyone tell me what's wrong?
Script:
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready(function () {
prepareList()
});
Your event handler is trapping the click on the URL and the "return false" is cancelling it.
Try removing the false.. not sure you need it in this implementation..
Andrew