Gtjkyu

HTML webpage with all css in Angular app I'm new to Angular and trying to resolve problem concerning displaying HTML website in my Angular application. The webpages with all resources like images, css files etc. are stored on external server. Sites contain text, images, own styles, css etc. Everythink works fine when I open such website in web browser. When I trying to display such page inside my application a lot of problems aren't resolved. I used innerHtml to diplay page in application: <div [innerHtml]="content"></div> All links are being changed to be direct before displaying. Text and images display but styles aren't applied. Maybe the problem is connected with the fact that links to .css are located in <"head> block? Hope sb had problem like me and can help :) Thanks in advance. I think you need to use a Sanitizer (angular.io/api/platform-browser/DomSanitizer) – John Jul ...

Form validation Angular 4 | multi-field validation | Set error on empty Field depending on other field I have a form where two fields (' From date ' and ' To Date ') are there along with other fields. Requirement: User can provide only ' From Date ' If both date are given ' From date ' must NOT be greater than ' To Date '; if given ' To Date ' will be underlined with Red. If one provides ' To Date ' only, then the ' From Date ' will be underlined with Red. To do this I used a frombuilder 'SrchForm' like this: myForm(){ this.srchGrp = this.SrchForm.group({ //other FormcontrolNames from_date : '', // from_date controlname for 'From Date' field to_date : '', // to_date controlname for 'To Date' field }, {validator: this.fromNtoValidate('from_date', 'to_date')}) } And, fromNtoValidate(from_date, to_date){ return (group: FormGro...

Cannot find module 'chart.js' I have a webapp thats running webpack, typescript and gulp. I want to use chart.js library and I have installed the chart.js npm package. I tried to define chart.js on one of the JS files and I am getting this: error TS2307: Cannot find module 'chart.js' error TS2307: Cannot find module 'chart.js' My JS file looks like this: import Chart = require( "chart.js" ); tsconfig: { "compilerOptions": { "module": "commonjs" }, "files": [ "typings/tsd.d.ts" ] } IMPORTANT: Noticed that chart.js definitions file doesnt have a proper module declaration. The left is accounting JS library which clearly defines the module and it works. Im guessing this is the issue. How do I use the declared variable or import it into another JS file? require usually requires a module name , not a filename - the module name might be chart but it depends on how ...

Is there any way in typescript to use objects as keys? I have tow classes: class A { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } class B extends A { } Also i have an object where i want to use instances of these classes as keys: const storage: Storage = {}; So it will look like this: const a = new A('Neo', 25); const b = new A('Smith', 31); storage[a] = 'What are you trying to tell me? That I can dodge bullets?'; storage[b] = 'Never send a human to do a machine's job.' And then i want to differ value by keys, like: const keys = Object.keys(storage); keys.forEach(key => { if (key instanceof A) { console.log('This is Neo'); } else if (key instanceof B) { console.log('This is Smith'); } }) How should looks like Storage interface, because in typescript Storage An index signature parameter type must be 'string' or 'number' ...

What is the difference between type and class in Typescript? What is the difference between type and class ? type class type Point { x: number, y: number } let p = new Point(); The above results in: 'Point' only refers to a type, but is being used as a value here. Why is this so? I am not certainly not using Point as a value but using it to instantiate a type. Point What are the situations where I would need to use type because class is not suitable? type class A TypeScript/JavaScript class is a function. A TypeScript type is just a definition that helps the TS compiler check the code. It is not translated to anything in the generated JS code. – axiac Jul 2 at 8:35 How do I instantiate a type? – Old Geezer Jul 2 at 8:37 ...

Invalid regular expression error in angular directive Condition: Contents can only contain characters from the following set: a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 / - ? : ( ) . , ' + • Contents may NOT begin with ‘/’ • Contents may NOT contain ‘//’ export function directDebitValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): { [key: string]: any } | null => { const directDebitID = nameRe.test(control.value); return directDebitID ? { 'directDebit': { value: control.value } } : null; }; } @Directive({ selector: '[directDebit]', providers: [{ provide: NG_VALIDATORS, useExisting: DirectDebitValidatorDirective, multi: true }] }) export class DirectDebitValidatorDirective { validate(control: AbstractControl): { [key: string]: any } | null { return control.value ? di...

Automatically compile TypeScript files on file save I'm looking to move a vanilla node.js project to TypeScript and I'm curious about how to restart my server with the latest changes without needing to run tsc from the command line each time I make a change. I see from this answer two options: ts-node and tsc --watch ts-node tsc --watch Can someone provide a little color on the difference between these two options? I understand they accomplish the same goal, but how are they different and in which situation should I use one over the other? See this comment on the answer: stackoverflow.com/questions/33535879/… – Aankhen Jul 2 at 10:21 @Aankhen that helps but it doesn't completely answer my question – johnnyodonnell Jul 2 at 13:21 ...

Testing with Mocha and Chai consuming values from previous tests I have some tests created with mocha and chai using TypeScript , they actually work as expected. Each function returns a Promise which runs a test . mocha chai TypeScript Promise test My question is if is there anyway to consume on each test the value returned by a previous test without using the nesting you see below. test test My concern is that if I have more test the nesting code could be very annoying going to the right test import * as request from 'supertest'; import app from '../src/app'; import { Promise } from 'bluebird'; import * as dateformat from 'dateformat'; import Commons from '../../utils/commons'; import { expect } from 'chai'; ... // all the functions used below are defined over here ... registerNonExistingUser(email, pass, role).then( (jwtToken: string) => { authenticateUserCorrectJwt(jwtToken).then( (user) => { ...

Ionic audio how can I play one track at a time I am using this ionic audio plugin for playing audio files instead of creating an html5 audio or customizing audio players using css and javascript. The plugin works great but the documentation is quite missing some pieces on how to handle some extra methods or how to customize its css. My goal is to play one track at a time and stop this track whenever the device is off. Here is the sample code of my home.html <ion-list> <audio-track #audio *ngFor="let track of myTracks" [track]="track" (onFinish)="onTrackFinished($event)"> <ion-item> <div class="from-me set-points"> <ion-thumbnail> <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play> </ion-thumbnail> <div item-content>...

Electron + React + Typescript + Visual Studio Code? Debug? Can I debug an electron-react app in visual studio? Using some boiler plate code, I am able to get my electron app to work in visual studio code. I can hit the breakpoint for main.js, but not for any of my typescript/React code. I am using webpack to build, but am not married to it. How do I wire up the debugger for the React stuff? I started with these walk-throughs: medium.com and typescriptlang.org Here are my configuration files launch.js { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "preLaunchTask": "webpack", "runtimeExe...

when accessing an object field using get method,value always undefined i wrote a TypeScript model and i wrote a get method : get comments(): [any] { return this.commentsTest; } set comments(comments: [any]) { this.commentsTest = comments; } the field it self is defined as private : private commentsTest: [any]; in the constructor i initialized the object as follow : this.comments = commentsTest; when i am trying to use that field using the get method it is always undefined, but if i am accessing it directly(while getting access warning) i do get the values i am looking for : openExtendedDetailsModal(comments) { console.log("***" + this.investorObject.comments); // undefined console.log(this.investorObject.commentsTest); // defined //this.commentsdDetails.altOpen(comments); } UPDATE here is the code i am using : investorObject: Investor; prametersSubscription: Subscription; id: string; constructor(private investorService: InvestorsService, private route: ActivatedRout...

React render props pattern class errors Help please. it is assumed that the component can be used like this: <MouseCoordinates></MouseCoordinates> or <MouseCoordinates> {(x,y) => { ... }} </MouseCoordinates> I don't understand what does it want. Here is the code: import React, { MouseEvent } from 'react'; const initialState = { x: 0, y: 0 }; const defaultProps = { children: (args: TMouseCoordinates) => null, }; type TMouseCoordinates = typeof initialState; type TDefaultProps = typeof defaultProps; type TState = Readonly<TMouseCoordinates>; type TProps = Partial< { children?: (coordinates: TMouseCoordinates) => JSX.Element; } & TDefaultProps >; class MouseCoordinates extends React.Component<TProps, TState> { static readonly defaultProps: TProps = defaultProps; ^^^^^^^^^^^^ readonly state: TMouseCoordinates = initialState; componentDidMount() { document.addEv...

Nativescript Geosearch Error I am building an ios version of my android app that uses algolia I am building the app using the nativescript - angular frameworks I used the plugin ativeScript-Algolia but everytime I search by aroundLatLng I get the error Error : {"status":400,"reason":"Invalid value for "aroundLatLng" parameter, expected float"} here is the relevant code //in the constructor of the component this.client = new Algolia('ddd', 'aaa'); this.index = this.client.initIndex('index'); //inside ngOnInit let latLng:string = parseFloat(this.lat).toFixed(4) + ',' + parseFloat(this.lng).toFixed(4); this.index.search(this.searchTerms , { aroundLatLng : latLng, aroundRadius: this.radius } , (content , err) => { if(err){ console.log("Error : " + JSON.stringify(err)); }else{ console.log("RESULT IS :...