It shows an error with the template,
Errors:
Property 'result' is private and only accessible within class 'upperCaseComponent'
Property 'mymessage' is not declared in 'upperCaseComponent'
my html
<input type="text" [(ngModel)]="mymessage"
<button (click)="clickMe()"> send</button>
<br><br>
<h1>{{result | json}}</h1>
my component.ts
import {Component} from "#angular/core";
export class MyComponent {
private result: any;
constructor()
}
So here the error say it not able to find variable 'mymessage' in uppercase.component.ts
export class UpperCaseComponent {
public results: any; // Change it private to public
public mymessage: any;
}
If you are trying to access variable within template you need to declare it as public as if you declare it as private it would be accessible only within class
welcome to SO.
Regarding your question, could you please give me a confirmation on the below points so that I can help you in a better way.
Can you please edit the question and post the component code here. (You can mask the sensitive data here).
Please check if you are using binding data is marked private?
Try like this:
export class upperCaseComponent {
result: any;
mymessage: String;
... // other code goes here
}
UpperCaseComponent.ts has result field as private, uppercase.component.html cannot access it so make result field as public.
As for myMessage field as it's not defined anywhere in the UpperCaseComponent.ts I assume you want to set it from the parent component, then create an #Input myMessage field in UpperCaseComponent.ts and use it in the template. Bind this from parent component wherever you want to use this UpperCaseComponent
Related
car.ts has "isNewCar" variable in "export class Car{}", and I need to export the "isNewCar" variable to another component carSale.ts which is in a different directory, and not in the same module. Do I have to add the car.ts template to the carSale.ts file and add the "isNewCar" as input?
edit: car.ts has export class Car{ isNewCar:boolean = false; } and car.ts is a component. carSale.ts is also a component but it is not in a same/shared module as car.ts I need carSale.ts, and eventually carSale.ng.html to get access to the isNewCar variable. So, can you tell me how I would use the viewChild decorator or anything else in carSale.ts to access that variable? I would ideally not want to make a shared module though but if I have to, I can.
you can extend the Car class like,
export class CarSale extends Car {
ngOnInit(){
this.isNewCar = true;
}
}
By extending the Car class, you will be able to access the isNewCar property from the CarSale class
Need some more information about the use case. Is the car.ts a component or a model ?
If the car.ts is a model you should aggregate it in your carSale.ts component or, if really necesary, make it globaly available with a service.
If car.ts is a component with his own template, then you can acces the value with the output event emitter or by using a viewChild decorator.
There are other way to share variables but the above is the more common.
car.ts :
/*
* This is a POJO
*/
export class Car{
isNew: boolean;
}
car-sale.component.ts :
export class CarSale {
car: Car; // Car is aggregate into CarSale
ngOnInit(){
car = new Car();
car.isNew = true;
}
}
car-sale.component.html
<-- just use your car object like this --!>
<div *ngIf="car">Is the car new ? {{ car.isNew }}</div>
Basically I have a ViewMaster with many many Functions that gets somewhere in a wrapper => components executed
Now I want to have a different but mostly the same View that needs some extra Functions. Now 2 states are changing its type from
interface ViewState {
something:something
...
}
to
interface NewViewState extends ViewState {
change:change
}
But how am I able to do this.
My ViewMaster looks like this
class ViewMaster extends React.Component<ViewProps,ViewState>{}
and my new View
class ViewNew extends ViewMaster
But how am I able to set a new ViewState generic?
EDIT: Thinking about it, I can simply change the interface ViewState
to
interface ViewState {
change:change|something
}
But still It would be intresting to know
There are a number of ways you can do this. Given that your base component is a React Component and it already has parameterization I would do something like this:
class ViewMaster<P = ViewProps, S = ViewState> extends React.Component<P, S>{}
and then
class ViewNew extends ViewMaster<ViewProps, NewViewState>{}
I have a Recact component defined as:
export default class App extends React.Component<AppProps, Items>
The Items class is defined as:
export default class Items extends Array<Item>
and the Item is just a class with a bunch of properties.
If in render() I bind a list to my Items object directly ie.
<List items={myItems} onRenderCell={this._onRenderCell} />
the list is displayed correctly, however if I this.setState(myItems) and then try to get the list binded to the state:
<List items={this.state} onRenderCell={this._onRenderCell} />
I get the compile-time error:
Type 'Readonly' is missing the following properties from type 'any[]': [Symbol.iterator], [Symbol.unscopables]
How do I fix this?
I found an easy solution to this... I created a new type:
type ItemsState = {
items: Items
}
then changed my component to use that as a state instead: export default class App extends React.Component<AppProps, ItemsState>
First, I want to point out that React's patterns discourage inheritance and prefer composition
Moreover you are extending an Array while React expect an Object.
Another misconception is "bind a function to the state". You are binding this context, not to variables.
Finally, state must be serializable and you should put in it only objects and arrays or primitives.
Try to refactor your components following this guidelines or post complete code for a more comprehensive solution.
I would like to create a service which will be responsible for opening bootstrap popovers with errors and success communicates. I have two components ErrorComponent, SuccessComponent and one service called CommunicatesComponent. I would like to use this service to open popover like
service.error('some error')
service.success('success!')
And this should display popover with provided text as argument. What I am doing is setting component property in service like followed and use this property in this service:
ErrorComponent
export class ErrorComponent implements OnInit {
public text:string;
#ViewChild('errorPopover') private errorPopover: NgbPopover;
constructor(private communicatesService:CommunicatesService) {
}
public ngOnInit() {
this.communicatesService.setErrorComponent(this)
}
}
Service:
#Injectable()
export class CommunicatesService {
private errorComponent:ErrorComponent
public setErrorComponent(component:ErrorComponent) {
this.errorComponent = component;
}
public error(text:string) {
console.log(this.errorComponent)
// this.errorComponent.text = text;
}
}
Unfortunitelly, it seems that my component object is not provided well, because console log prints undefined. How it should be done?
Regards
There are two things I would change in your design
ErrorComponent and CommunicatesService depends on each other. It's good to avoid it - CommunicatesService could easily work with different components. So you could create an rx Observable public property of the service, so any component can subscribe to it. When service.success('success!'), the service will send the message text to the subscribers.
In ErrorComponent, you get the popover component as a #ViewChild. You could consider binding ErrorComponent.text to the popover directly (reversing the dependency).
These changes could solve the problems you have and make the design looser - easier to understand and maintain.
We are using TypeScript with angularjs 1.5. We have a situation where we need to trigger an event to load data from the parent component. The problem we are facing is that when the event is triggered, this is referring to the window object not the controller in which it is present. How to get the current instance in the event?
Because it is TypeScript any method or property can be accessed though this only. And I need the controller instance because there are few initialization done in the constructor which I need to access.
Example implementation
namespace doc.common {
#Component({
selector: name
})
export class myComponent {
#bind.oneWay()
public id:number;
public service:myService;
/*ngInject*/
constructor(private serviceRef:myService){
this.service = serviceRef;
}
public $onChange():void {
//*this* is referred to window object, not controller instance
}
}
}
Usage
<my-component id='id'></my-component>