I would like to start an animation on user interaction with matRipple attribute directive.
I have tried it with <i matRipple class="material-icons">create</i> and imported MatRippleModule from #angular/material, like this:
import { MatRippleModule } from '#angular/material';
imports: [
MatRippleModule
]
If I click on the element, nothing happens and I don't even get an error message. Why doesn't it work for me?
I have figured out that I didn't see any changes because of the background color. I have added matRippleColor="orange" and now I see that it works.
Related
The goal: trigger a component residing in a module, so my subscription in the ctor of the component is activated.
I'm using PreloadAllModules as a preloadingStrategy. But it's not happening.
I need to subscribe to some events in de constructor of my FriendsComponent.
the setup is like this:
FriendsComponent is shown in the template of the SocialComponent, which is part of the SocialModule.
social.component.html
<div>
<friends-component></friends-component>
</div>
the SharedModule declares the FriendsComponent.
AppModule imports SharedModule,
RouterModule for AppModule is like this:
{
path: 'social',
component: SocialModule,
children: [
{
path: 'friends',
component: FriendsComponent
}
]
},
I think the problem is because the FriendsComponent is not part of a router-outlet?
Can it be done without a router-outlet?
If a module would be pre- or eager loaded, would it automatically trigger the constructors (and the subscription)?
Is the issue with my preloading strategy?
I have tried adding: data:{preload:true} to the paths declared in routermodule.
Everything works fine, when the user activates the SocialModule (for instance by clicking on a button with a routerLink to social/friends), but I want it activated on startup (just not shown on any html)
I'm working with Angular Ivy, but think I'm still missing the points. Any help is appreciated
You need to handle your initial subscriptions in a service and have the component subscribe to that service. You won't need to touch the routes. It what services are for.
You subscribe to the value you need in your FriendService and have FriendComponent subscribe to your FriendService.
Here is the issue that I'm encountering with Angular 7 :
I have two outlets : the main app router outlet, and a secondary outlet named 'administration'.
When I want to navigate through any administration link at start, it works fine. But next time, when I try to navigate, angular throws this error message :
Error: Cannot activate an already activated outlet
So, can someone explain me why ? I haven't found any solution on forums...
Here is a stackblitz : https://stackblitz.com/edit/angular-osnnd4
Thank you all everybody :)
The problem occurs when lazyloading child routes. You have to manually deactivate the outlet everytime you change a route.
I have modified your AdministrationComponent to workaround as follow. It should be able to work for now, until Angular have a way to solve the problem.
import { Component, OnInit, ViewChild } from '#angular/core';
import { RouterOutlet, Router, ActivationStart } from '#angular/router';
#Component({
selector: 'app-administration',
templateUrl: './administration.component.html',
styleUrls: ['./administration.component.css']
})
export class AdministrationComponent implements OnInit {
#ViewChild(RouterOutlet) outlet: RouterOutlet;
constructor(
private router: Router
) { }
ngOnInit(): void {
this.router.events.subscribe(e => {
if (e instanceof ActivationStart && e.snapshot.outlet === "administration")
this.outlet.deactivate();
});
}
}
This might be silly, but for anyone looking for a solution to this:
Make sure that in there's no undefined variable in any of the inner or children outlets.
I fixed this in my project and everything is back to normal.
My problem:
Basically my named outlet wasnt deactivating, in my case I would use it for a bunch of different modals, and while manually deactivating my modal outlet would work, it didnt work when loading a different path and the same component into the outlet so I could not recycle my componet, in my case the modal component.
So as pointed by #Andreas in here (https://github.com/angular/angular/issues/20694#issuecomment-595707956). I didn't have any asigned components for an empty path, so I am guessing it couldnt deactivate the outlet somehow because of that, so I just asigned an emptyComponent for path: "".
The first way: to fix this I will be using an empty component for "" or non truthy routes
app-router-module.ts
...
{
outlet: "modal",
path: "",
component: EmptyComponent,
},
...
Another way: If you want, you can do this instead when closing a view
model.component.ts
this.router.navigate([
{
outlets: {
modal: null,
},
},
]);
either way the router deactivates, better yet I think you should use the second example as it deactivates and destroys the view. in my case I had a json with non truthy routes so I just had to map those to null values.
Check thoroughly if you have imported a lazy-loaded module in its parent module or some other module irrespective of the routing. If so, remove its import from there.
That was it in my case.
My problem was that I have a login guard which performs a redirect via this.router.navigate, and the guard was returning true after redirects.
When I changed the code to return false in the case of a redirect, the issue has been gone.
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
Here i have requirement like if i type type anything in Textbox it should be Reflect back to Component
<label> Search FRom Table:</label> <input (change)="someval()">
Someval(){
//Here i need that TextBox value
}
You can achieve this in Two way data binding method and so on.
Html Looks like following
<label> Search From Table:</label>
<input name="searchTxt" [(ngModel)]="searchTxt" (input)="someval()">
{{searchTxt}} <!-- here iam printed html file also -->
Typescript File:
//Add one variable
public searchTxt:any;
someval(){
console.log("Here iam printed variable",this.searchTxt);
}
Make sure you have to import Forms Module in app module file
other wise it show error like this
app.module.ts
import { FormsModule } from '#angular/forms'
imports: [
FormsModule,
],
For more details about related here, please visit:
https://www.code-sample.com/2017/05/angular2-input-textbox-change-events.html
Angular 2 change event on every keypress
I have a custom button component done in Polymer Dart:
<div id="buttonDiv">
<my-button id="traceButton"
mode="icon" faicon="fa-comment-o"
toolTip="Print a simple comment"
disabled="false" on-click="{{ traceSomething }}">
</my-button>
</div>
I'm trying to copy/paste this button somewhere else. So a user defines it somwhere, and I basically move it by way of getting $['buttonDiv'].children then inserting it somewhere else. The problem is that {{ traceSomething }} is now irrelevant since it's not part of the new parent. I get errors saying that the parent object, which is another polymer component doesn't have an instance getter "traceSomething".
My question is, is there a way to remove "traceSomething" before I insert it somwhere else? I tried removing the "onClick" event listeners, but the buttons still wants to call that function upon click. Also, I've tried adding a preventDefault, etc, like in: In Dart, if I listen to a click event with two listeners, how do I know which happens first?
But, no luck.
I'm not sure what you mean by copy/past. Do you clone the element, or do you just append it to some other elements children.
Anyway, I don't think you can remove the event listener if it was added declaratively. If you add it imperatively it is easy to remove and readd later.
import 'dart:async';
...
StreamSubscription subsc;
#override
attached() {
super.attached();
subscr = onClick.listen((e) => (this.parentNode as ShadowRoot).host.traceSomething(e));
}
#override
detached() {
super.detached();
if(subscr != null) {
subscr.cancel();
}
}
See also https://stackoverflow.com/a/22168745/217408 about accessing the parent of a Polymer element (for Dart Polymer <= 0.16.x)