I am trying to use *ngFor to render a list of components:
<componentx
*ngFor="let a of data"
[viewName]="a.name"
[viewQuery]="a.prop2"
[viewValues]="a.prop3"></componentx>
// ...
export class App {
public data:any[];
constructor() { this.data = [{name: 'foo', prop2: 'bar', prop3: 'hello'}]}
}
This is the component itself:
export class ComponentX {
#Input() viewName:string;
#Input() viewQuery:string;
#Input() viewValues:any[];
}
When I run this code I get the following error:
Error: Uncaught (in promise): Template parse errors:
Can't bind to 'viewName' since it isn't a known native property ("
<componentx
*ngFor="let a of data"
[ERROR ->][viewName]="a.name"
[viewQuery]="a.prop2"
[viewValues]="a.prop3"></componentx>
What am I doing wrong?
This error generally means:
1- That specific #Input doesn't exits in your component , which in your case it does.
2- You've forgotten to declare your component in the root app module.
import {ComponentX} from 'its/path';
#NgModule({
declarations:[ComponentX]
})
export class AppModule {
}
Please make sure that you did import your component -'ComponentX' in class 'App'
Related
Trying to update input value in the same component but not able to update.Getting error like
ERROR
Error: Cannot read properties of undefined (reading 'pop')
So, How to resolve this issue?
table.component.ts:
export class TableComponent implements OnInit {
#Input() names: any;
constructor() {}
ngOnInit() {}
testFn() {
this.names.pop('Test22');
this.names = [...this.names];
console.log(this.names);
}
}
Demo : https://stackblitz.com/edit/angular-pass-table-data-to-input-property-dlsufy?file=src%2Fapp%2Ftable%2Ftable.component.ts
Jay Swaminarayan!
You are doing it slightly wrong while passing the Component Reference.
In ChangeComponent, it is not referencing the table component properly.
In AppComponent HTML the table component must be passed as reference input to the changecomponent.
You may look at this corrected code
https://stackblitz.com/edit/angular-pass-table-data-to-input-property-2ehcxs?file=src%2Fapp%2Ftable%2Ftable.component.html,src%2Fapp%2Ftable%2Ftable.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fchange%2Fchange.component.html,src%2Fapp%2Fchange%2Fchange.component.ts,src%2Fapp%2Ftable%2Ftable.component.css
I configured storybook in Angular app and tried running following first story using storybook demo components.
import { Button } from '#storybook/angular/demo';
export default { title: 'My Button' };
export const withText = () => ({
component: Button,
props: {
text: 'Hello Button',
},
});
export const withEmoji = () => ({
component: Button,
props: {
text: '😀 😎 👍 💯',
},
});
This above example works perfectly fine. Now when I import anything from #storybook/angular like this
import { moduleMetadata } from '#storybook/angular';
// OR
import { storiesOf } from '#storybook/angular';
Build breaks with following errors
ERROR in node_modules/#types/webpack-env/index.d.ts(281,11):
TS2320: Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'WebpackRequire'.
Named property 'context' of types 'Require' and 'WebpackRequire' are not identical.
ERROR in node_modules/#types/webpack-env/index.d.ts(281,11):
TS2320: Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'WebpackRequire'.
Named property 'ensure' of types 'Require' and 'WebpackRequire' are not identical.
ERROR in node_modules/#types/webpack-env/index.d.ts(354,11):
TS2320: Interface 'NodeModule' cannot simultaneously extend types 'Module' and 'WebpackModule'.
Named property 'hot' of types 'Module' and 'WebpackModule' are not identical.
I tried multiple solutions but none of them worked.
Update:
I was able temporarily fix it to move forward by modifying the interfaces in node_modules/#types/webpack-env/index.d.ts
// this line
interface NodeModule extends NodeJS.Module {}
// replaced with
interface NodeModule {}
Similarly
interface NodeRequire extends NodeJS.Require {}
// replaced with
interface NodeRequire {}
and finally
interface Module extends __WebpackModuleApi.Module {}
// replaced with
interface Module {}
I tried to instantiate dynamically my class in a Vue JS with TypeScript project.
I tried this solution.
It works in Angular 2+ but in my Vue project I have this error :
Uncaught TypeError: Object prototype may only be an Object or null: undefined
I have a Classes.ts file
import {CMyClass} from 'path/to/my/class';
export const Classes = {
CMyClass: CMyClass
}
My class file :
import {CMyOtherClass} from 'path/to/my/mother/class';
export class CMyClass extends CMyOtherClass {
constructor() {}
}
My mother class file :
export class CMyOtherClass {
constructor() {}
}
And my function to instantiate a class :
import {Classes} from 'path/to/Classes/constante';
buildClass(className: string): any {
return new Classes[className]();
}
An idea ?
I have an abstract class in "File1":
// File1.tsx
import * as React from 'react';
export interface IProps {
prop1: string;
prop2: number;
}
export abstract class Something extends React.Component<IProps> {
public typeName: string;
}
then, in other file (File2) i define infinite classes extending from abstract class Something:
// File2.tsx
import { Something } from './File1';
export class Something1 extends Something {
public typeName: string = 'Type1';
public render() {
return <div>Something 1</div>
}
}
export class Something2 extends Something {
public typeName: string = 'Type2';
public render() {
return <div>Something 2</div>
}
}
Now, here is my problem:
In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:
// File3.tsx
import { Something } from './File1';
import { Something1, Something2 } from './File2';
interface IReadProperty {
something: Something;
};
const ReadProperty: React.SFC<IReadProperty> = ({ something }) => {
// here i can access to property typeName. No problem here.
something.typeName // Type1 | Type2 | ... Infinite
...do some stuff
}
interface IRenderComponent {
something: Something;
}
const RenderComponent: React.SFC<IRenderComponent> = ({ something }) => {
// i need do some stuff here before render "something" component
// here i get an error when i try render the component
return <something />;
}
const Main: React.SFC = () => {
return (
<div>
<ReadProperty something={Something1} />
<RenderComponent something={Something1} />
</div>
);
}
but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.
What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;
here is an example that i trying to do: https://codesandbox.io/s/18yzvkx8jj
The issue is that in your definition of IRenderComponent, you're saying that something is an instance of Something, whereas what you want is a constructor type. One other thing is that React generally complains when you try to instantiate components with lowercase names. Try this:
interface IRenderComponent {
Something: new (props: IProps) => Something1;
};
const RenderComponent: React.SFC<IRenderComponent> = ({ Something }) => {
return <Something prop1="foo" prop2={3} />;
}
For IReadProperty, it looks like you do want an instance of Something (since you want to access typeName, which is an instance property). However, you can't actually pass an instantiated component:
<ReadProperty something={<Something1 prop1="" prop2={3} />;} /> //Error
This is because <Something1 ... /> isn't actually an instance of Something1 - it's an instance of JSX.Element. You could pass an instance of Something1, like this:
<ReadProperty something={new Something1({prop1: "", prop2: 3})} />
But I imagine that's not what you want, since you can't actually use the resulting instance in rendering.
The best way to address the IReadProperty issue depends on what you're actually trying to accomplish. In general, React favors composition over inheritance and reflection, so it might be easier to consider how to achieve your goal by starting with base components and composing them, or using higher-order components.
Make sure that you have jsx:react in tsconfig.json
Make sure that you have consistent version of react react-dom #types/react and #types/react-dom package versions.
I have a component MyComponent and it is declared like this:
export class MyComponent implements IComponent {
...
#Input() Departments: any;
#Input() DropDownOptions: any;
#Input() Data: any[];
...
}
However, there is no property Data, when I try to access from PersonComponent component.
HTML of PersonComponent component:
<fieldset>
<my-comp #myGrid [Options]="ps.Options['myGrid']"></my-comp>
</fieldset>
TypeScript of PersonComponent component:
export class PersonComponent implements OnInit {
#ViewChild('myGrid') myGridComponent: MyComponent;
ngAfterViewInit() {
debugger;
let localData2 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined
}
ngAfterContentInit() {
debugger;
let localData1 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined
}
}
Variables that can be seen at debugger of Chrome:
How can I read values of Data property of MyComponent? What am I doing wrong?
#Input Data ... decorator "receives" data from the parent component. You set it via the attribute [Data] inside the parent template. If you don't set it it will be indefined. On the other hand you have [Options] attribute that doesn't have the corresponding #Input in the child.
You can fix it like so:
<fieldset>
<my-comp #myGrid [Data]="person.data"></my-comp>
</fieldset>
where person is an array with data field in parent component.
Please read thoughtfully the documention https://angular.io/guide/template-syntax#inputs-outputs and https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
And it would be better to not use reserved/too generic name like Data, Options to avoid name collisions and also camel case them.