Hello Radzen team,
i need to call several javascript functions at different places in my app.
i want to put these function in a kind of library.
what is the best way in radzen to place this library?
I am testing to create my eschadencustomfunctions.ts file (library) in the client/src/app folder and import it in the e.g. add-fahrzeug.component.ts file.
Am i on the right way?
Regards
Thomas
i have created a utils.ts file in client/src/app with a function:
export function erzeugeKennzeichen(teil1: string, teil2: string, teil3: string): { kennzeichen: string; suchtext: string; }
{
return {
kennzeichen: (teil1 || ‘’) + ‘-’ + (teil2 || ‘’) + ’ ’ + (teil3 || ‘’),
suchtext: (teil3 || ‘?’) + (teil1 || ‘?’) + (teil2 || ‘?’)
}
}
But i cant find a way to call this function from add-fahrzeug-generated.component.ts from the event
form0Change(event: any) {
if (event.property == ‘KennzTeil1’) {
this.kennzeichendata = {
…this.kennzeichendata,
KennzTeil1: event.value.toUpperCase(),
Kennzeichen: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’)).kennzeichen,
Suchtext: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’).suchtext)
}
}
cause i dont know how to
import { erzeugeKennzeichen } from ‘…/utils’
What am i missing?
Regards
Thomas
I am sorry but I do not understand what the problem is. In order to use TypeScript functions you have to import them in the required file.
Hi Atanas,
The code from above
form0Change(event: any) {
if (event.property == ‘KennzTeil1’) {
this.kennzeichendata = {
…this.kennzeichendata,
KennzTeil1: event.value.toUpperCase(),
Kennzeichen: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’)).kennzeichen,
Suchtext: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’).suchtext)
}
}
is in the generated "add-fahrzeug-generated.component.ts" file. So i cant place "import { erzeugeKennzeichen } from ‘…/utils’" into this file.
It is because i place the code in the change event of the page as "execute javascript". I dont know howto do this in an other way.
This is what i want to do: Video
I have got this to work fine when i place
this.kennzeichendata = {
** ...this.kennzeichendata,**
** KennzTeil1: (event.value || '').toUpperCase(),**
** Kennzeichen: (event.value || '').toUpperCase() + '-' + (this.kennzeichendata.KennzTeil2 || '') + ' ' + (this.kennzeichendata.KennzTeil3 || ''),**
** Suchtext: (this.kennzeichendata.KennzTeil3 || '?') + (event.value || '').toUpperCase() + (this.kennzeichendata.KennzTeil2 || '?')}**
into the code field of the change event in the designer.
This code must be place three times in the change event because of the changing condition.
${event.property} == 'KennzTeil1'
${event.property} == 'KennzTeil2'
${event.property} == 'KennzTeil3'
But i need it at several pages in my app and so i want to have a function for it to not write so much code over and over again.
Kind Regards
Thomas
I see. You can do so like this:
(<any>this).formChange(event); By doing so the form0Change handler will look like this:form0Change(event: any) {
(<any>this).formChange(event);
}
formChange(event: any) {
if (event.property == ‘KennzTeil1’) {
this.kennzeichendata = {
…this.kennzeichendata,
KennzTeil1: event.value.toUpperCase(),
Kennzeichen: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’)).kennzeichen,
Suchtext: erzeugeKennzeichen(event.value.toUpperCase(), this.kennzeichendata.KennzTeil2, (this.kennzeichendata.KennzTeil3 || ‘’).suchtext)
}
}
import { erzeugeKennzeichen } from '../utils'
Ah… Great!
Thank you Atanas!
Thomas
Hi Atanas,
when i use the code as you described i got an error at the spread operator. My JS knowledge is a lot better now but i cant understand the spread operator at this point...
Radzen->run:
ng-cli:
ERROR in src/app/add-artikel/add-artikel.component.ts(22,9): error TS1127: Invalid character.
src/app/add-artikel/add-artikel.component.ts(22,14): error TS1005: ':' expected.
src/app/add-artikel/add-artikel.component.ts(30,9): error TS1127: Invalid character.
src/app/add-artikel/add-artikel.component.ts(30,14): error TS1005: ':' expected.
Can you help me out?
Kind Regards
Thomas
the ... were copied from here. these "points" are not dots. They are something else. I replaced them with typing dots and it works.
I hab similar problems with ‘ ’ copied from here.
Something to have in mind...
Thomas
