How to remove the icons in the mat-step-icon using angular material.
I tried below:
<ng-template matStepperIcon="edit"></ng-template>
<ng-template matStepperIcon="done"></ng-template>
this works for edit and done state. want to change the default state as well. dont know what is the name to give.
can anyone help please?
thanks
Here is a simple workaround from the GitHub issue
#ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;
ngAfterViewInit() {
this.stepper._getIndicatorType = () => 'number';
}
You can use the following template to remove the icons from default state:
<ng-template matStepperIcon="done"></ng-template>
From the docs, the possible values for matStepperIcon are
number | edit | done | error
So for default state, you'll want to use number since you have edit and done covered.
You should end up with this:
<ng-template matStepperIcon="number"></ng-template>
On Angular Material v.14.1.3, you could add completed="false" properties in <mat-step completed="false"></mat-step>. the step icon will keep number index for selected step.
You can use this style in your css file of your angular project.
.yourParentDivCssClass ::ng-deep .mat-step-header .mat-step-icon {
display: none !important;
}
if you want to remove all the icons on your material stepper one solution is to go to your styles.css file and add the following:
.mat-step-header .mat-step-icon {
display: none !important;
}
This should do the trick
Related
Im working on a project in ruby on rails (rails 6), that include a blog working with action-text and trix. I have to add few option to my rich-text editor and there is one that block me for few days.
I added buttons in my trix toolbar, for add more title tag options following this issue and everything worked fine.
But when i try to add text-align options (left, right, center) it dont work
I tried many thing, but i would expect this to work:
in application.js
Trix.config.textAttributes.alignLeft = {
style: { textAlign: "left" },
parser: function(element) {
return element.style.alignLeft === "left"
},
inheritable: true
}
then i insert it in the toolbar like this:
in application.js also
addEventListener("trix-initialize", function(event) {
var buttonHTML = '<button type="button" data-trix-attribute="alignLeft">RED</button>'
event.target.toolbarElement.
querySelector(".trix-button-group").
insertAdjacentHTML("beforeend", buttonHTML)
})
I tried both, with blockAttributes and textAttributes but dont work.
The button appear but does nothing.
What i want is that the div where my text is embed get style=" text-align: left"
Do you have an idea of how i could make it work? or maybe ideas, advices or lectures propositions?
(i saw somes issues in basecamp/trix github that speak about that(this one is really interesting), but its appear that the customized tag option, is not a good option and i didnt managed to make anything else work.
Thanks a lot
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
the suggestion dropdown disappears when user clicks the input then press esc key.
then a weird progress bar keeps cycling..
I need to disable this function
First, you should add an id or a class in your md-autocomplele. Then, try this:
#id md-progress-linear .md-container
{
display: none;
}
or
.class md-progress-linear .md-container
{
display: none;
}
Hope this help.
I deal with this error one entire day, but the solution is simple: update your angular-material library.
More information? Version 1.1 work fine. If you look the solution is here: https://github.com/angular/material/commit/e821ae327f4ed193d14450aa0c83cd457092f563 (line 446 of autocompleteController.js)
I have a number of tabs, representing different services. I wish to have a final 'tab' tagged on the end of the list used to add a new service. Denoted by a simple '+'. This will open a simple dialogue.
I was hoping I could put my own ng-click behaviour on this single tab and prevent default but this doesn't work.
Is there any way I can 'catch' the tab click event BEFORE the tab body switch takes place and prevent it from happening?
It seems that it is not possible at the moment (see e.g. https://groups.google.com/forum/#!topic/ngmaterial/rNWMk3S9uDI) - at least using official api.
If you are ok with a solution which hacks into the directive internals then you can do following:
angular.module('MyApp').directive('tabWatcher', function() {
return {
require: ['mdTabs'],
restrict: 'A',
link: function(scope, el, attrs, controllers) {
var mdTabsCtrl = controllers[0];
var origSelectFn = mdTabsCtrl.select;
// overwrite original function with our own
mdTabsCtrl.select = function(index, canSkipClick) {
if (...) {
origSelectFn(index, canSkipClick);
}
}
}
};
I've placed a demo here http://codepen.io/jarek-jpa/pen/wGxqOq . Try to click some tabs. The select() call will be intercepted and depending on a condition let pass or not.
Disclaimer: Again, it hacks into the md-tabs directive internals, so may stop working any time (tested with angular-material 1.0.7)
You can set pointer-events to none to prevent the md-tab from responding to clicks.
Example:
<style>
md-tabs.readonly {
pointer-events: none;
user-select: none;
}
</style>
<md-tabs class="readonly">
<md-tab label="can't touch this"></md-tab>
</md-tabs>
This is tested to work with Angular Material 1.0.1
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result: