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 ...

How to get angular 5 cdn I have basic knowledge of angularjs , now i want to learn Angular 5. I am not want to install node.js for angular 5. So where to get angular 5 cdn. https://angular.io/ You can play around with Angular here: stackblitz.com/edit/angular-yapvki – Commercial Suicide Apr 3 at 11:16 I want to add angular 5 cdn in php files – Javed Iqbal Apr 3 at 11:20 1 Answer 1 Angular 5 has no CDN. You have to install it with npm. By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, pr...

Observable fires only once I decided to pick up this RxJS tutorial over the weekend to learn about reactive programming. The goal is to set up a simple page that generates an interactive list of users from the Github users API using Observables. The list displayed is a subset of the total number of users retrieved (in my case 3 out of 30). The list needs to be refreshable (show a new set of users), and you need to be able to remove entries from it by clicking the 'remove' button on each respective entry. I've set up a chain of Observables to define the behavior of the page. Some act as events to trigger processing, and some publish processed results for use in the app. This chain should dynamically cause my list to be updated. Currently, the default flow is like this: A list update is triggered on startup, by refreshing the list and by removing something from the list. However, when I refresh the list, this happens: As you can see, the trigger to update the list of users is...

RxJS - How to replace a Callback in a Subscription with an Observable Recently a colleague of mine implemented a callback in a Subscription in our Angular 6 application like this: callDoSomething() { this.doSomething(() => { // logic from callback }); } public doSomething(callback: any) { this.http.get('/api/doSomething').subscribe(data => { // do something with data if (callback) { callback(); } }, error => { // do something with error }); } I thought it would be better to solve this "problem" with an RxJS Observable instead. But after I implemented/refactored the code it doesn't seem to be the better solution. The code looks much more complicated now. Is it necessary to cast the pipe to a promise and return it as an observable? import { Observable, of as observableOf, from as observableFrom } from 'rxjs'; import { catchError, map } from 'rxjs/operators'; callDoSomething() { this.doSomething().subs...

Express launching Angular application I have an express server setup online which loads multiple ports and those ports are setup on subdomains for example. port 9000 loads the main domain.com port 8000 loads the main application at "app.domain.com" port 1000 loads "signup.domain.com" and the build version of the app is on port 8500 "build.domain.com". The application is an Angular application however when I go to load the Angular app it loads on port 4200 or it says 8500 is in use. So currently I am loading that in express like so: // Build Application - In Development var appbuild = express(); appbuild.get('/', function (req, res){ res.sendFile('/app/build/myapp/src/index.html', { root: '.' }) }); var port = 8500; appbuild.listen(port); console.log('Build App Listening on port', port); So my question is in Express how can I instead of writing sendfile command make it launch the angular app in...

Selection not proper after rowspan on PrimeNG Table I am facing a strange issue. I am not able to select the merged row using rowspan on table of PrimeNG. Can anyone help me to quick fix this ? See Stackblitz By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

How to use Observable variable in *ngFor I am using rxjs in my nativescript-angular app. In my case, I realize a simple animation by setting StackLayout's top with an observable variable 'myTop$' . Following codes work well, and the "StackLayout" moves as expected : rxjs 'myTop$' "StackLayout" <AbsoluteLayout width="100%" height="100"> <StackLayout [top]="myTop$ | async" height="30" backgroundColor="#faebd7" width="100%" verticalAlignment="center"> <Label [text]="'abc'"></Label> <StackLayout class="hr-light"></StackLayout> </StackLayout> </AbsoluteLayout> public myTop$:Observable<Number> = interval(1000).pipe(map((animationIndex)=>{ return animationIndex%100; // top range 0->100 }),share()); However, when i put these codes in *ngFor for more animations, it see...

Angular and Material Multi-level Menu with Breadcrumb not working properly I am working with angular 6 and angular material 6. Here i am trying to create multilevel menu with breadcrumb. I have worked multilevel menu with properly but can not able to navigate menu with selected breadcrumb. When i click on the selected breadcrumb then the menu not getting organized appropriately. My demo link : stackblitz link here 1 Answer 1 @hi Monir tuhin You can try this Solution. I Have create a demo on Stackblitz. Component.ts breadCrumb(menu, index) { console.log('sub breadCrumb'); this.menuHeader.splice(index + 1, this.menuHeader.length - 1); if (menu[index] && menu[index].items && menu[index].items.length) { this.appitemsTravel = menu[index].items; } } Component.html <mat-toolbar color="primary" style="height: 45px; font-size: 16px; font-weight:...

Patch Value in nested reactive forms which used form array [closed] How to patch values in nested reactive forms which uses form array Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. What have you done so far? Add some code – Anuradha Gunasekara Jul 2 at 9:10

How to display alert box when the screen size is lesser than tablet view (768 * 1024) in angular efficiently? To achieve the above, i.e to display the alert box when the screen size is lesser than (768 * 1024) i did like below @HostListener("window:resize", ["$event"]) onResize(event) { if (event.target.innerWidth < 1024 || event.target.innerHeight < 768) { alert( "outer height" + event.target.outerHeight + "," + event.target.outerWidth); alert("inner height" + event.target.innerWidth + "," + event.target.innerHeight); } } I'm not sure which is similar to screen size, i gave inner height but still it is little different. So how can i do the above correct and efficiently? Any help would be appreciated. Thanks! 2 Answers 2 I think for your use case you need to use the outerHeight / outerWidth since it is not...

GET http://localhost:4200/logo.jpeg 404 (Not Found) [closed] Getting this error everytime I try to add image using in angular from my computer This question appears to be off-topic. The users who voted to close gave this specific reason: Did you add logo.jpeg to the assets folder? And Can you add the code where you are trying to get the image? – Anuradha Gunasekara Jul 2 at 7:23 The image is not available, that's why! crosscheck whether your image is added or you misspelled the name – V5NXT Jul 2 at 7:25 @AnuradhaGunasekara probably is right. There is an assets folder which is intended to use for static content. Put your image in there a...

Angular 2 or 4 or 5 or 6 drag and image upload is not working? [closed] I want angular 2 or 4 or 5 or 6 drag and upload image examples. Drag and drop image upload is not working properly and the image is not visible properly. It is an blur image. Please look at the below image. ngx-Dropzone-wrapper . ( Code is here ) The image is coming like this. If the container width is less also it is working like this only. Please look at the example, link Please look at this example link, If u uplaod any image here, it is displaying as an blur image only. Please help me how an I fix this. If I expand the box size also, i want the image as same clarity. And it should be visible properly. Any other examples are there to drag and upload the image in angular? can anyone please help me to do this? This question appears to be off-topic. The users who voted to close gave this specific reason: Can you share your code as a MCVE on StackBlitz? – aloisdg ...

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...

Expected identifier or keyword at the end of the expression (in get API) PLease Somebody Help. Got Struck in calling the get API. Getting error as unexpected token.. What the mistake have I made.. Below is my Service Method: get_tq() { let headers = new Headers(); headers.append('Content-Type', 'application/json'); // this.createAuthorizationHeader(headers); return this.http.get(this.base_url + "learnchapter/get", { headers: headers }) .map((res: Response) => res.json().Results||); } And Components.ts Method: this.service.get_tq().subscribe(data => { let objResponse:tResponse =data; if (objResponse.Code==200) { this.profile = data.Results; console.log(this.profile); this.profile.forEach((value, key) => { this.profileInfo.push(value); }); } else if (objResponse.Code==403) { // $('#m1Modal').modal('hide'); this.toastr.error("Record...

PrimeNG: <p-table> custom sort issue for dates I am using primeNg <p-table> to implement custom sort for "Quarterly Results" field. <p-table> "Quarterly Results" The date in the "Quarterly Results" field is as below: "Quarterly Results" Q3-2017 2018 2017 Q1-2016 2000 Q3-2018 Q2-2012 Source : https://primefaces.org/primeng/#/table/sort To sort the data I have done below code: HTML: <p-table [value]="documents" (sortFunction)="customSort($event)" [customSort]="true"> <ng-template pTemplate="header"> <tr> <th [pSortableColumn]="quarter"> Quarterly Results <p-sortIcon [field]="quarter"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> ...

Implement Multi Select feature (Long press/Hold and select) in Ionic I am working on an Ionic project having a list. I want a multi-select feature just like the hold and select feature in android gallery , so that upon long press checkboxes appear in front of list items, enabling me to select more than one item. Any suggestions on how to implement that? I am not looking for GalleryView feature but just long press and select feature, just like it. Is it possible without creating actual checkboxes? Or do I need to create checkboxes and implement the on-hold event? Note: For those who are confusing whether I want to implement android gallery feature, please pay attention! I DO NOT want to implement android gallery feature here. I only want to implement a MULTI-SELECT feature on simple list in the same way we select multiple images on long press in android gallery, or even take an example of selecting multiple contacts in contact list, etc. You need to create ...

Angular 6 Http Request Json Headers Doesn't Works I'm just trying to make a post using Angular 6 HttpClient, but the problem is that it doesn't send the data if HttpHeaders is in the options params. That just happens with 'Content-Type': 'application/json'. AuthComponentTS: import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {HttpClient, HttpHeaders} from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class AuthService { httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })}; api = 'http://localhost:3000/api/login'; constructor(private http: HttpClient) {} login(form): Observable<any> { const body = JSON.stringify(form); console.log(form); return this.http.post<any>(this.api, body, this.httpOptions); } authenticationHandler(): boolean { const token = sessionStorage.getItem('token...

Angular incompatibility with html attributes I have an imported css template written on bootstrap, and want to use it inside Angular app. CSS are imported from index.html Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping. Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example data-background="assets/images/slider_1.jpg" to img src="assets/images/slider_1.jpg" , it will be loaded and shown from the first time. Example of map plugin. Doesnt show nothing. <div class="maps-container map-widget m-b-25"> <div class="map" data-addresses="[4.4, -4.4]" data-icon="assets/images/map-marker.png" data-zoom="16" data-street-v...

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice' Im totaly confused about this error. I have a very basic simple routing: const routes: Routes = [ { path: '', component: FrameDefaultComponent, pathMatch: 'full', children: [ {path: '', component: SiteCalculatorComponent}, {path: 'site-notice', component: SiteSiteNoticeComponent} ] }, ]; When i click the menu entrie for site-notice in the menu that looks like this: menuEntries = [ { title: 'Calculator', url: '/' }, { title: 'Site Notice', url: '/site-notice' } ]; Then i get the following error: core.js:1521 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice' Error: Cannot match any routes. URL Segment: 'site-notice' at ApplyRedirects.push../node_modules/@angular/r...

Angular Material mat-select underline color change in Angular application I'm new to Angular Material, so I may be missing something, but I would appreciate any help on this case. My goal is to change the default blue underline of mat-select tag to white color while it is on focus. I managed to deal with this by adding this code to global styles file of my project: .mat-select-value, .mat-select-arrow{ color: #fff !important; } .mat-form-field-infix{ border-bottom: 2px solid lightgrey !important; } .mat-focused .mat-form-field-underline .mat-form-field-ripple{ background: none; } You can see how it looks here (language selection dropdown list in top left corner). After that I realized, that i will need some more mat-select tags in another components, but the underline this time should not be white, but black. Thats why I need my problem to be solved by changing component styles, but still nothing works for me. So far I tried to use !important to reset Angular Material ...