Search between a Gas Station

Posts

Showing posts with the label angular

How to add required asterisk in a custom control?

How to add required asterisk in a custom control? I'm using angular 6 to create a custom component which contains a custom form control. So far, I've implemented ControlValueAccessor in my component. ControlValueAccessor My custom control is a simple MatSelect component from Angular Material. I want to show the asterisk ( * ) for when that control is required. MatSelect * So far, I've got the custom control to work, but adding the required attribute to the component doesn't add the asterisk to my control! required <app-provinces formControlName="projectProvince" required></app-provinces> Should I define an @Input variable for it and handle it manually, or should it be done automatically? @Input I'm confused. Why would an asterisk magically appear where you want it to appear if you have not added any code in your component to do that? – JB Nizet Jul 1 at 10:19 ...

how to render a javascript files after a view is render in Angular

how to render a javascript files after a view is render in Angular I am new to angular and this is first time working with angular.js . I am trying to build an single page application in angular which has the following pages All my pages have jquery script to handle modal popup form submission etc. All of them work, but when i render those pages with ng-view inside index.html. Those script doesn't work,. They do not render as well. ng-view Can anyone please tell me how can i fix this issue or if there is any other way of doing the same keeping those jquery functions. Here is my file structure Index.html <html> ...... <header> <script src="<ANGULAR.JS>"></script> <script src="<ANGULAR ROUTE.JS"></script> <script src="<JQUERY>"></script> <script defer src="<OTHER SCRIPTS>"></script> </header> <body> <ng-view></ng-view> </bo...

vs code cannot find module '@angular/core' or any other modules my project was generated with [Angular CLI] version 1.2.6. I can compile the project and it works fine, but I always get error in vs code telling me cannot find module '@angular/core' cannot find module '@angular/router' cannot find module ..... I have attached content of my tsconfig.json file this has been really frustrating for me, spending 2 hours to figure out what is wrong, I have also uninstalled and reinstalled the vs code it doesn't work. here is my enviroment specification : @angular/cli: 1.2.6 node: 6.9.1 os: win32 x64 @angular/animations: 4.3.4 @angular/common: 4.3.4 @angular/compiler: 4.3.4 @angular/core: 4.3.4 @angular/forms: 4.3.4 @angular/http: 4.3.4 @angular/platform-browser: 4.3.4 @angular/platform-browser-dynamic: 4.3.4 @angular/router: 4.3.4 @angular/cli: 1.2.6 @angular/compiler-cli: 4.3.4 @angular/language-service: 4.3.4 os:Microsoft vs 10 enterprise project root folder .a...

ERROR in @angular/material/autocomplete/typings/autocomplete-origin.d.ts: Type 'ElementRef' is not generic

ERROR in @angular/material/autocomplete/typings/autocomplete-origin.d.ts: Type 'ElementRef' is not generic I have downloaded some angular template which makes use of angular material library... I was trying the run this template on my local machine.. I have successfully executed the npm install .. but while ng serve .. I am getting the warnings & errors like below, npm install ng serve Your global Angular CLI version (6.0.7) is greater than your local version (1.7.4). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". @angular/compiler-cli@4.4.7 requires typescript@'>=2.1.0 <2.4.0' but 2.5.3 was found instead. Using this version can result in undefined behaviour and difficult to debug problems. Please run the following command to install a compatible version of TypeScript. npm install typescript@'>=2.1.0 <2.4.0' To disable this warning run "ng set warnings.type...

proxy in angular universal

proxy in angular universal I'm on the projects that were made with Angular Universal. I need to change blog.mywebsite.com to mywebsite.com/blog for SEO, I used proxy-config in ng start , like code below, it works correctly but it doesn't work when I run build:ssr blog.mywebsite.com mywebsite.com/blog ng start build:ssr there is no error in the built project, just after running with node dist / server.js show website but I call mywebsite.com / mag I redirect to 404 page, while there is no problem in npm start node dist / server.js mywebsite.com / mag npm start "scripts": { "ng": "ng", "build": "ng build --prod", "start": "ng serve -o --proxy-config src/proxy.conf.json ", "extract": "ng xi18n --output-path=locale", "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server ", "serve:ssr": "node dist...

How to pass data to dialog of angular material 2

How to pass data to dialog of angular material 2 I am using dialog box of angular material2. I want to pass data to the opened component. Here is how I am opening dialog box on click of a button let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, data :{'name':'Sunil'} }); On the documentation page there is data property, But I checked MdDialogConfig in my installed packages /** * Configuration for opening a modal dialog with the MdDialog service. */ export declare class MdDialogConfig { viewContainerRef?: ViewContainerRef; /** The ARIA role of the dialog element. */ role?: DialogRole; /** Whether the user can use escape or clicking outside to close a modal. */ disableClose?: boolean; /** Width of the dialog. */ width?: string; /** Height of the dialog. */ height?: string; /** Position overrides. */ position?: DialogPosition; } there is no data property in configuration cla...

HttpClient leading to error I am using Angular 4 and want to start using HttpClient . However I get JSON parsing error and after alot of searching I have not been able to fix it yet. HttpClient Old method import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { _throw } from 'rxjs/observable/throw'; import { AppConfig } from '../config/app.config'; import { AuthenticateService } from '../security/shared/authenticate.service'; import { IFlower } from './flower.model'; addFlower(Flower: IFlower): Observable<any> { this._auth.checkToken(); const headers = new Headers(); this.createAuthorizationHeader(headers, this._auth.token); headers.append('Content-Type', 'application/json'); this.options = new RequestOptions({ headers: headers }); return this._http.post(this.apiUrl + ...

Tree shaking css using angular-cli build / schemantics

Tree shaking css using angular-cli build / schemantics I am on an angular-cli project. I am facing an issue with the css. This is somewhat a non-code question and deviates from stackoverflow needs of putting code. But hopefully it will not be marked down for closure. Here is the background: I have a lot of unnecessary css lingering around. I need treeshaking for the unnecessary css during the build process. Is there one that you can help me with. Here is the background of what is happening: Options: I see manual tree shaking is an issue. So I saw there are a few css treeshakers around but since angular cli works with multiple components, I see a need of cli integration of the css tree shaker. I could not find one for cli to merge with build. Questions: Anyone has suggestion on how to integrate or is there a css-tree shaker community project? I have not worked with schmatics. What exactly do you mean by treeshaking unnecessary CSS? Could you provide a generic...

Need help in designing a SaaS application [on hold]

Need help in designing a SaaS application [on hold] I need to develop a SaaS application (HR application with his USP(Unique Selling Point)) which my customer wants to use for multiple companies. I have to choose NodeJS, Angular, MongoDB technologies for this. I am new to these technologies. Can someone direct me how can I design this application ? Should I be designing it as a multi-tenancy application or should I be creating with different instances and with different databases all together ? If it is different databases and different middleware instances, then how can I spin those instances as soon as a new customer joins and tries to click on new account ? Can someone please help in understand in designing and best practises and advantages of the approach ? Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this ...

Firebase Variable Not Defined - Pass Variable Between Functions

Firebase Variable Not Defined - Pass Variable Between Functions It's clear I am not passing a variable from one of my other JS files correctly. It is my understanding that if I inject a file, I am able to call functions fromsthat file. I was able to accomplish this in businesses.controller where I call businessesService.uploadImageToFireBase, but I am not receiving the variable or it is not readable when I attempt to do I believe is the same process from businesses.service.js and firebase-stor.service.js. Error I am receiving: angular.js:13424 ReferenceError: storageRef is not defined businesses.service.js: (function() { 'use strict'; angular .module('bizdir-frb-admin.businesses') .factory('businessesService', businessesService); businessesService.$inject = ['firebaseDb', '_', '$firebaseArray', '$firebaseObject', 'listsService', 'firebaseStor']; /* @ngInject */ function busin...

NgRx - Reducers priority and execution order against store

NgRx - Reducers priority and execution order against store If different reducers are associated to the same action and are performing changes to the store, are they receiving the same version of it before any edit happens? Is there a priority to consider? Example: Lets assume you dispatch an action Update to edit an entity on server side, once data is successfully updated, an effect will dispatch an Update_Success action with an instance of the newly received version of entity as payload. A first classic and logical reducer will use it to update the store: Update Update_Success case ItemActionTypes.UPDATE_ITEM_SUCCESS: { const item = action.payload; return { ...adapter.upsertOne(item, state), loaded: true, loading: false }; } Now lets assume that in a different file, you have a different reducer associated to the same action and needs to compare the newly received entity against the old one in store: case ItemActionTypes.UPDATE_ITEM_SUCCESS: { const item =...

Angular HTTPClient POST body not sending

Angular HTTPClient POST body not sending Currently I am trying to POST a name, email and message from an angular frontend to a php script running in the same nginx server which then runs phpmailer to send an email containing the name, email and message. Here is the code so far: import { Component, OnInit } from '@angular/core'; import { Email } from './email'; import {ContactService} from './contact.service'; import {HttpClient, HttpHeaders} from '@angular/common/http'; import {NgForm} from '@angular/forms'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }) }; const email = new Email('', '', ''); @Component({ selector: 'app-contact', templateUrl: './contact.component.html', styleUrls: ['./contact.component.css'], providers: [ContactService] }) export class ContactComponent implements OnInit { email = new Email(...

Angular2, what is the correct way to disable an anchor element?

Angular2, what is the correct way to disable an anchor element? I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this? disable <a> Updated Please note the *ngFor , this would prevent the option of using *ngIf and not rendering the <a> altogether. *ngFor *ngIf <a> <a *ngFor="let link of links" href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }} </a> The TypeScript component has a method that looks like this: onClick(link: LinkObj) { // Do something relevant with the object... return false; } I need to actually prevent the element from being clickable, not just appear that it is with the CSS . I was assuming that I needed to potentially bind to the [disabled] attribute at first, but this is incorrect as the anchor element doesn't have a disabled property. [disabled]...