Trying to focus() on a treeview node in this plunker using an ElementRef. I commented the two lines at the bottom cause they don't work.
Here's the plunker for the code listing below:
https://plnkr.co/edit/aUnechu6glXk5CMFsMex?p=preview
import { Component, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<kendo-treeview
#treeview
[nodes]="data"
textField="text"
kendoTreeViewCheckable
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
childrenField="items">
</kendo-treeview>
`
})
export export class AppComponent {
#ViewChild("treeview") treeview: ElementRef;
public data: any[] = [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
];
//let tree = this.treeview.nativeElement;
//this.treeview.focus('0');
}
And the focus() method as per their docs and sample here:
https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-focus
How can I focus() programmatically within my component code, as opposed to the click() event posted in their docs ?
The code needs to be executed inside one of Angular's lifecycle hooks or from a method. We need either a ngAfterViewInit or a custom AppComponent.focus() method that ViewChild has time to instantiate the TreeView instance:
ngAfterViewInit(){
//XXX: this.treeview is the TreeViewComponent instance set by ViewChild decorator
this.treeview.focus('1');
}
Related
I am trying to manipulate the head of my website using the head attribute inside of the export default function on my post layout inside of my Saber Vue.js static site generated website (https://saber.land). Whenever I try to add in my script tag and the Adsense code using the head attribute, none of the main.js code is running. I know that an error is happening because the title of the website changes from the formatted one to the exact URL of the website. Here is my post.vue (layout) script tag code:
import 'prismjs/themes/prism-twilight.css'
import Navbar from '../components/Navbar.vue'
import Footer from '../components/Footer.vue'
export default {
components: {
Navbar,
Footer
},
props: ['page'],
head() {
return {
title: `${this.page.title} - ${this.$siteConfig.title}`
}
},
methods: {
formatDate(v) {
const date = new Date(v)
return `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`
}
},
head: {
script: [{
"src": "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
"async": "true",
"data-ad-client": "ca-pub-1485901785138606"
}],
script: [{
"src": "/main.js"
}]
}
}
I am using ngx-admin template. Right now i am trying to create a modal that will open on a button click. I am trying to show a form in the modal window but on clicking, the modal does open but it does not show me the form and i get this error
No component factory found for EmailInstructorsComponent. Did you add it to #NgModule.entryComponents?
I am using lazy laoding and most of the modules have been added in the declaration of a shared.module file to avoid the erros during production.
I tried to look at other links too that were available on the stackoverflow but none of them refered to modal-windows/dialogs that's why i had to create this separate thread
classes-and-students.module.ts file
const ENTRY_COMPONENTS = [
EmailInstructorsComponent
];
#NgModule({
imports: [
ClassesAndStudentsRoutingModule,
NbCardModule,
Ng2SmartTableModule,
NbAlertModule,
SharedModule,
CKEditorModule
],
declarations: [
ClassesAndStudentsComponent,
...routedComponents,
InstructorbiddingComponent,
EmailInstructorsComponent,
],
entryComponents: [
...ENTRY_COMPONENTS
],
providers: [
NewsService,
],
})
export class ClassesandStudentsModule { }
instructorbidding.component.ts file
#Component({
selector: 'ngx-instructorbidding',
templateUrl: 'instructorbidding.component.html',
styleUrls: ['instructorbidding.component.scss']
})
export class InstructorbiddingComponent {
#ViewChild('contentTemplate', { static: true }) contentTemplate: TemplateRef<any>;
#ViewChild('disabledEsc', { read: TemplateRef, static: true }) disabledEscTemplate: TemplateRef<HTMLElement>;
constructor(private windowService: NbWindowService) { }
openWindowForm(contentTemplate) {
this.windowService.open(EmailInstructorsComponent, { title: 'Window'});
}
}
email-instructors.component.ts file
#Component({
selector: 'ngx-email-instructors',
templateUrl: './email-instructors.component.html',
styleUrls: ['./email-instructors.component.scss']
})
export class EmailInstructorsComponent {
constructor(public windowRef: NbWindowRef) {
}
close() {
this.windowRef.close();
}
}
email-instructors.component.html file
<form class="form">
<label for="subject">Subject:</label>
<input nbInput id="subject" type="text">
<label class="text-label" for="text">Text:</label>
<textarea nbInput id="text"></textarea>
</form>
I am not sure what mistake i am making so please help me out by pointing out my mistake
Try to change your code like this to see if it work
const ENTRY_COMPONENTS = [
EmailInstructorsComponent
];
#NgModule({
imports: [
ClassesAndStudentsRoutingModule,
NbCardModule,
Ng2SmartTableModule,
NbAlertModule,
SharedModule,
CKEditorModule
],
declarations: [
ClassesAndStudentsComponent,
...routedComponents,
InstructorbiddingComponent,
EmailInstructorsComponent,
],
entryComponents: [
ENTRY_COMPONENTS
],
providers: [
NewsService,
],
})
export class ClassesandStudentsModule { }
I'm trying to animate an element at the :leave transition and I'm a bit baffled by its behaviour.
trigger('inOut', [
transition(':enter', [
style({'max-height': '0'}),
animate(250, style({'max-height': '150px'}))
], { params: { maxHeight: '150px'}}),
So I would expect my element being animated to have a max-height of 15px set at the final frame of the animation... and left there! I can see the max-height being animated but then at the end its removed and the element scales to whatever height fits its content. Struggling to imagine how this is useful, am I doing something wrong?
Update - Resolved it with this
trigger('inOut', [
state('void', style({'max-height': '0'})),
state('*', style({'max-height': '{{maxHeight}}'}), { params: { maxHeight: '0px'}}),
transition(':enter', animate(300)),
transition(':leave', animate(250))
]),
A way to solve this is to use a state for the end of the animation and (#animation.done) to trigger this state.
Here is a StackBlitz example.
app.component.html
<div [#routeAnimations]="state" (#routeAnimations.done)="onDone($event)" class="animate-div">
</div>
app.component.ts
import { trigger, style, state, animate, transition } from '#angular/animations';
#Component({
animations: [
trigger('routeAnimations', [
state('done', style({
maxHeight: '150px'
})),
transition(':enter', [
style({ 'max-height': '0' }),
animate(1000, style({ 'max-height': '150px' }))
], { params: { maxHeight: '150px' } })
])
]
})
export class AppComponent {
state = '';
onDone(event) {
this.state = 'done';
}
}
I had been using a graphql decorator on my components (via react-apollo), and in an attempt to make my code more DRY, I decided to wrap the graphql function in another decorator like so:
import { graphql } from 'react-apollo'
export default function wrappedQuery(gqlDocument, numberOfItems) {
return (component) => graphql(gqlDocument, {
options: ...
props: ...
})(component)
}
Happily, this works in browser when I use it like so:
import React from 'react'
import wrappedQuery from './wrappedQuery'
import gqlDocument from './allPosts.graphql'
#wrappedQuery(gqlDocument, 10)
export default class BlogPostContainer extends React.Component {
...
}
However, when I try to run tests with Jest, any test that imports this class returns an error pointed at the BlogPostContainer class declaration
Test suite failed to run
TypeError: Cannot read property 'default' of undefined
at App (src/index.js:10:31)
at Object.<anonymous>(src/pages/BlogPage/containers/BlogPostContainer/index.js:13:53)
When I replace wrappedQuery with the identical graphql decorator, the test runs correctly. But as this query function is 15 lines long and subject to change between many classes, it's not ideal. Like I said, wrappedQuery is working in browser. Maybe this is a jsdom issue? I'm not well enough experienced to know if the problem is with Jest, or babel-jest, or jsdom, or something else...
// Works in browser and in Jest
#graphql(gqlDocument, {
options: ...
props: ...
}
export default class BlogPostContainer extends React.Component {
...
}
I also attempted to use the function as you would without the transform-decorators plugin, but I get the same issue
// Works in browser but not in Jest
class BlogPostContainer extends React.Component {
...
}
export default wrappedQuery(gqlDocument, 10)(BlogPostContainer)
Here are my config files:
// jest.config.js
module.exports = {
moduleFileExtensions: [ 'js' ],
moduleDirectories: [ 'node_modules' ],
moduleNameMapper: {
'^src/': '<rootDir>/src'
},
transform: {
'\\.(gql|graphql)$': 'jest-transform-graphql',
'^.+\\.js$': 'babel-jest'
}
}
// .babelrc
{
"presets": [
[ "env", {
"targets": {
"browsers": [
"last 2 versions"
]
},
"useBuiltIns": "usage",
"debug": true
}],
"stage-0",
"react"
],
"sourceMaps": true
}
I have a validateConnection event within which I have a lot of conditions. Now on one of these conditions, I want to add a custom label to the link that gets created. How do I do this within validateConnection
You can try this:
prepare a 'placeholder' for the future label - it creates a label without text:
new joint.dia.Link({
labels: [
{ position: 0.5 }
]
}),
Then in the validateConnection set the label text value throught the attr
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
if (cellViewT) {
linkView.model.prop('labels/0/attrs/text/text', cellViewT.model.attr('text/text'));
} else {
linkView.model.prop('labels/0/attrs/text/text', '')
}
}
https://jsfiddle.net/vtalas/hxbfo0m4/
joint.dia.Link({
labels: [
{ position: 0.5, attrs: { text: { text: 'test' } } }
]