I am trying to use a property off the router to trigger an ngIf but am not sure of the correct syntax in the html. Angular2 RC6
{
path: 'detail/:id',
component: HeroDetailComponent
},
<div *ngIf="router.component = HeroDetailComponent">
some text to be shown if the HeroDetailComponent is loaded
</div>
use === not reflected on angular docs page....
Related
I am trying to work around not being able to downgrade an Angular 8 #Directive using UpgradeModule.
I have a nested angular material component that needs to hook into cdkScrollable. My hierarchy look likes this:
<div class="some-class-that-allows-scroll"> <-- angularjs scrollable component
<mat-form-field></mat-form-field> <-- angular 8 component that needs cdkScrollable on parent
There is no way to downgrade the cdkScrollable directive to work in angularjs, IE
<div cdkScrollable class="some-class-that-allows-scroll"> <-- Will not work in angularjs template
<mat-form-field></mat-form-field>
Since I cannot downgrade the cdkScrollable #directive I was trying to "wrap" that directive in a reusable angular 8 component, and then downgrade that component.
IE:
Angular 8 component:
import { Component } from '#angular/core';
#Component({
selector: 'scroll-wrapper',
templateUrl: './scroll.component.html',
styleUrls: ['./scroll.component.scss']
})
export class ScrollWrapperComponent {
constructor() { }
}
Template:
<div cdkScrollable>
<ng-content></ng-content>
</div>
When using that downgraded component in angularjs template:
<scroll-wrapper>
<div class="some-class-that-allows-scroll"> <-- angularjs scrollable component
<mat-form-field></mat-form-field> <-- angular 8 component that needs cdkScrollable on parent
</div>
</scroll-wrapper>
However when doing this the scrollable class and the cdkScrollable directive do not end up on the same element. Is there a way to create an angular 8 component that wraps another component and have the cdkScrollable directive applied to the same element that is being wrapped?
How can a child DOM of an angularjs component access the component's variable values?
To illustrate, I am using angular official website first component example. I added a div inside the component.
<span>Name: {{$ctrl.hero.name}}</span>
<!--The following is the child of the component,
which is not showing component's variable as expected -->
<div ng-controller="InnerCtrl">
Inside the component, Name: {{$ctrl.hero.name}}
</div>
Here is the plunker
I have the following Plunker that uses ui-router and Angular's 1.6x new component feature.
The state 'userRegister' becomes active then initialises the 'userRegister' component. This component injects a new <user-register/> into the <ui-view> then injects the HTML contents of the ng-template script block, which is all working fine.
The final DOM ends up being:
<ui-view class="ng-scope">
<user-register class="ng-scope ng-isolate-scope">
<h1 class="header">Create account</h1>
</user-register>
</ui-view>
However, I cannot find a way to add a CSS class selector to the <user-register/> tag.
e.g. using a class selector called .example I'd like to achieve the following:
<user-register class="example ng-scope ng-isolate-scope">...<user-register/>
Any ideas please?
Sure you could always wrap the template on a div and put the class there.
If don't want to do it, you can inject the $element and use the $postLink function to add the class you need:
.component('userRegister', {
templateUrl: '/views/user-register',
controller: function($element) {
this.$postLink = function() {
$element.addClass('example');
}
}
})
Here is the working plunker:
https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview
Final DOM:
<user-register class="ng-scope ng-isolate-scope example">
<h1 class="header">Create account</h1>
</user-register>
I'm using Angular 1.5 Component router and having trouble getting a scope variable in the parent to be accessible in child components. I've created a plunker here that illustrates the problem. I've created a parent component with this view:
<nav>
<ul class="linkList">
<li><a ng-class="{selected: $ctrl.isSelected('Applications')}" ng-link="['Applications', {search:$ctrl.search}]">Applications</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Processes')}" ng-link="['Processes']">Processes</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Tasks')}" ng-link="['Tasks']">Tasks</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Resources')}" ng-link="['Resources']">Resources</a></li>
</ul>
<div class="filter">
Filter: <input type="search" ng-model="$ctrl.search" />
</div>
<div class="clear"></div>
</nav>
<ng-outlet></ng-outlet>
Notice the "search" variable in the parent component view. I want this to be accessible to child components, but it's not working for me. I've seen examples that show child components being directly referenced in parent components like the following:
<application-grid search="$ctrl.search"></application-grid>
However, doesn't this defeat the purpose of the ng-outlet? I don't think I should have to manually pass parameters to child components like this right? What is the right way to do this?
Just stumbled upon this - hoping you found the solution but if not here it is.
You can get this to work easily using the require property.
Just add this to you child component set up and bingo:
require: {
parent: '^app'
}
Then to access the parent scope object do $ctrl.parent.search.
Note you don't have to call it parent - it can be what ever name you like.
I've forked your plunkr - see it working http://plnkr.co/edit/epPg2xWY6IYJN2Fnvg61
You can access the route parameters through the $routerOnActivate lifecycle hook, which gets called automatically when the route transitions to that component. Here's the example from the Angular docs:
function HeroDetailComponent(heroService) {
var $ctrl = this;
this.$routerOnActivate = function(next, previous) {
// Get the hero identified by the route parameter
var id = next.params.id;
return heroService.getHero(id).then(function(hero) {
$ctrl.hero = hero;
});
};
...
Also, it's worth noting that components created with angular.module().component() always have isolate scopes - i.e., you can't access scope variables from the parent scope in them. They have to be explicitly passed down, either through the router or through the bindings.
For more information, you should take a look at the Component Router section of the Angular developer guide - the documentation for the new router is really sparse, but that guide does a good job of explaining how it all works.
I am using angular 1.5 component. I have created a component and used it inside the template
<ul>
<li>
<a>Some action here</a>
</li>
<li>
<my-component></my-component>
</li>
</ul>
inside this my-component I have code for
<a></a>
and css properties are defined as ul li a, because of the component name I am unable to access the element in css using the above selector.
Is there any way out for this ?
You can - in your css file - do:
my-component {
//your styles
}
http://plnkr.co/edit/Lw18LtUVuHfSZU05b6R9?p=previewplunker, see last component
I have face this problem earlier, just try to add
replace: true
property on your directive.
hope it will also work for you.