I am creating an Angular Element in which I am using Angular Material design. The Material contents are not getting rendered in the browser, but it's showing up on the DOM.
My element template looks like this:
<h1>Hello world!</h1>
<mat-menu #appMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Help</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>more_vert</mat-icon>Click Me!
</button>
Final output
For mat-menu it's not rendered inside HTML until it's not visible.
You could check this Demo click on last button.
Related
Adding material design elements using innerHTML attribute renders a result. But if we develop a html page with the same material design content without using innerHTML attribute produces different result.
here is the example
html file material design content directly inserted:
<div id="requestForm">
<button mat-raised-button color="primary" id="proceed_btn" style="margin-right: 15px;" (click)="reset()" *ngIf="request_form_selectedIndex > 2">Submit<i class="material-icons right material_icons_btn">send</i>
</button>
</div>
in the browser's dom the above page rendered like this.
expected result
<div id="requestForm">
<button _ngcontent-c3="" color="primary" id="proceed_btn" mat-raised-button="" style="margin-right: 15px;" class="mat-raised-button mat-primary ng-star-inserted" ng-reflect-color="primary">
<span class="mat-button-wrapper">Submit
<i _ngcontent-c3="" class="material-icons right material_icons_btn">send</i>
</span>
<div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
<div class="mat-button-focus-overlay"></div>
</button>
But when I try to insert the material element using innerHTML attribute, it does not render the same result.
html file:
<div id="requestForm">
</div>
ts file:
htmlElement1 = "<button mat-raised-button color=\"primary\" id=\"proceed_btn\" style=\"margin: 95px 15px;\" (click) =\"reset()\" *ngIf=\"request_form_selectedIndex > 2\">Submit <i class=\"material-icons right material_icons_btn\">send</i> </button>"
document.getElementById("requestForm").innerHTML = htmlElement1;
in the browser's dom the above page renders the following result.
but I want the above mentioned expecpted result while adding material
element through the innerHTML attribute.
my result
<div _ngcontent-c3="" id="requestForm">
<button mat-raised-button="" color="primary" id="proceed_btn" style="margin: 95px 15px;" (click)="reset()" *ngif="request_form_selectedIndex > 2">Submit
<i class="material-icons right material_icons_btn">send</i>
</button>
</div>
what shoud I do to get my expected result?
Angular sanitizes DOM manipulation so that unsafe (potentially hackable) things won't work. The tag is obvious, but also won't work as well as others. You haven't said what you are trying to achieve, so it's not possible to make a good recommendation other than the obvious - insert DOM from the DOM (like your first example). If you need conditional insertion, use ngIf or ngSwitch.
I recently started using angular-material and am struggling/unsure about opening/closing a mat-menu... I see in the examples on the angular-material documentation site that they assign an id to the menu and then apply a directive to the button that is used to toggle the menu. e.g. [matMenuTriggerFor]="menu"
How can I go about writing a directive that does that? I'm not sure how to pass a reference to a specific menu to a directive that then calls the toggle() method on the DOM element with that id?
The following code produces the errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.
There is no directive with "exportAs" set to "matMenu".
My code:
<li>
<button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
<mat-icon class="sn-item">
<i class="material-icons">archive</i>
</mat-icon>
</button>
<span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>
<mat-menu #stockSystemMenu="matMenu">
<button mat-menu-item>
<mat-icon>
<i class="material-icons">chevron_right</i>
</mat-icon>
<span>Service 1</span>
</button>
</mat-menu>
</li>
There is confusion because Material introduced a breaking change as I understand it.. See material 2 Changelog - Breaking Changes
Starting with Material 2.0.0-beta.12. Use mat instead of md-*.. Seems only some of the docs at material.angular.io are updated with mat. Specifically, if you click view source and see md, I believe they have yet to replace it with mat.
So either update to Material 2.0.0-beta.12 and use mat-*, or use md-*.
"Your code is correct, you don't need to write matMenuTriggerFor directive, it is part of the API, make sure you have imported the MatMenuModule, MatButtonModule, and MatIconModule into your app module." - from comments
I would like to know how to navigate to a different page based on a value in html/Angular 2. If the value is true, then a specific page will load. I already have buttons that use routerLink to navigate to different pages - I would like to replicate that functionality but instead of using a button, pages will load whenever a specific value is true.
Here is my main app html page:
<p-toolbar>
<div class="ui-toolbar-group-left">
<button pButton type="button" label="Home" routerLink="/"></button>
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" label="About" routerLink="/about"></button>
<button pButton type="button" label="Page1" routerLink="/page1"></button>
<button pButton type="button" label="Page2" routerLink="/page2"></button>
<i class="fa fa-bars"></i>
</div>
</p-toolbar>
<br />
<!--Implement page routing here...-->
<div *ngIf="valueCheckComplete">
<div *ngIf="showPage1"></div>
<div *ngIf="showPage2"></div>
</div>
In the bottom portion you can see where the value checks are occurring. How would I load a page if for example showPage1 were true? All of the functionality that handles these values is already implemented in my TypeScript file, I just need to know how to navigate to a different page based on a value, not a button click.
Figured it out. Instead of routing to the page in my html page, I used a Router object in my typescript file.
constructor(private router: Router, ...){
// set boolean here
}
goToPage()
{
if(this.showTuner)
this.router.navigate(['/tuner']);
else if(this.showProcessor)
this.router.navigate(['/processor']);
}
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
I am trying to make Disqus comment counter link in Bootstrap button, but everything I tried was unsuccessful.
The idea is that the whole button should be link.
When I am trying to do like this:
<a href="page.html#disqus_thread">
<button type="button" class="btn btn-default"></button>
</a>
the Disqus just overwriting everything about Bootstrap button CSS and just leave naked link like "1" (I left just number in disqus settings).
When I am trying this way:
<button type="button" class="btn btn-default">
</button>
the button appears, as well as comment counter link, but the button is not the link like if it was wrapped into <a> tag. So I need some help.
What you are trying is not valid HTML. Try something like this: