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?
Related
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 have an angularjs component(almost empty markup) acting as a shell/parent to its child views(markups with different columns/formats). I am able to see the component but no child views are loaded.
ui-router config code:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('parent', {
url: '',
views: {
'parentComponent': {
component: 'parentComponent'
}
}
})
.state('parent.child', {
url: '/child',
templateUrl: 'child.html'
});
index.html:
<body ng-app="app" >
<div ng-controller='RoutingCtrl'>
<parent-component></parent-component>
</div>
</body>
The parent, which is a component:
<!DOCTYPE html>
<div>
<br />
<br />
<div>I am the parent, a angularjs component.</div>
<div>There sould be the nested/child view right below:</div>
<div ui-view></div>
</div>
child:
<div>Hi! I am the child!</div>
My controller tells ui-router to go to child view:
$state.go('parent.child');
I don't want to declare parent as abstract because, in my real app, I have views parallel to the parent component view(together, they form a multiple named view) here and these other high level views(except the parent component) must be visible regardless of the child views.
I am using angularjs 1.5.8 and ui-router version 0.4.2
Plunker:
http://plnkr.co/edit/tBhVTjttMagaJzHQNvro?p=preview
You haven't provided any details what you are trying to accomplish, so based on what it looks right now, you have two options: either go with the ui-view template throughout your app and use the parent-child relationship of ui-router or go with hybrid approach of loading your component, and inside it, a state you want to show.
Example with parent-child relationship - This example uses ui-view throughout the app. parent-component is loaded with it's own state and it's not abstract. This approach is good if you want to load different templates for different states in the same place.
Example with hybrid approach. This example follows your current app structure with parent-component loaded in index.html and a state loaded in your parent-component. You can see that you really don't need a parent state here as you have put your parent-component directly in index.html file. State child is loaded in inside your parent-component and it doesn't need a parent state.
My app component (an Angular 2 component, downgraded for index.html) contains this:
<router-outlet></router-outlet>
<div ng-view></div>
This is just like it says to do in "Dividing routes between Angular and AngularJS"
https://angular.io/docs/ts/latest/guide/upgrade.html#!#adding-the-angular-router-and-bootstrap
But the ng-view isn't picking up any AngularJS routes.
How would ng-view work in an Angular 2 template anyway? How am I supposed to be able to use both types of routers at the same time?
<router-outlet></router-outlet> isn't working either -- this html just shows up on the page statically as-is.
I have <base href="/"> and the javascript console has no errors in it.
Google, message me :) who/ajxtaylor
This has gotten me closer in the right direction but it's still not working.
<router-outlet> wasn't working because I was missing the top level app component in the bootstrap array:
#NgModule({
bootstrap: [
AppComponent,
],
})
export class AppModule {
ngDoBootstrap() {}
}
https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs
Submitted GitHub issue regarding lack of error message: https://github.com/angular/angular/issues/14572
I don't know if the Angular AppComponent is supposed to have downgradeComponent called on it and if so, whether the index.html should use the AngularJS selector or the Angular selector.
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....