Posts

Showing posts with the label angular6

Express launching Angular application

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

Angular and Material Multi-level Menu with Breadcrumb not working properly

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

Angular / Firestore - What's the best way to check the User ID in multiple components?

Angular / Firestore - What's the best way to check the User ID in multiple components? I have an 'authservice.ts' file where I try to manage user auth style things. However, in each of my components, I'm always subscribing to the user to get the user ID. The user ID is then used inside my Firestore functions to query data where the user ID is referenced inside collection and document paths. Is there a more 'fluent' way of achieving the same thing? Or is this approach actually suitable? Below are the examples of the auth service and a component file that references the auth service. auth-service.ts ... user: Observable<firebase.User>; ... constructor() { this.user = afAuth.authState; } Any One Of My Components.ts ... private _subscription: Subscription; ... ngOnInit() { this.subscribeToUser(); } subscribeToUser() { this._subscription = this.authService.user.subscribe(user => { if (user) { this.userID = user.uid; th...

How to display alert box when the screen size is lesser than tablet view (768 * 1024) in angular efficiently?

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

Angular 2 or 4 or 5 or 6 drag and image upload is not working? [closed]

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

Can't bind chart-data from component to view. Angular 6, predix-ui

Can't bind chart-data from component to view. Angular 6, predix-ui pls help. SOS I'm trying to bind chart-data to plot graph, like: [attr.chart-data]='chartData' But in console of browser I have only warning that: Polymer::Attributes: couldn`t decode Array as JSON My Component: export class AppComponent { arr: Array<Object> = ; seriesConfig: {}; ngOnInit(): void { this.arr = [ { x: 1530426560000, y: 179.46 }, { x: 1530426570000, y: 179.58 }, { x: 1530426580000, y: 179.58 }, { x: 1530426590000, y: 179.6 }, { x: 1530426600000, y: 179.52 }, { x: 1530426610000, y: 179.56 }, { x: 1530426620000, y: 179.52 }, { x: 1530426630000, y: 179.52 } ]; this.seriesConfig = { y: { type: "line", name: "series1", x: "x", y: "y" } }; } } My View: <div> <h2 id="title-tag">Timeseries</h2> <px-vis-timeseries id="ts1" prev...

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'

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

Child To Parent Value access using ViewChild

Child To Parent Value access using ViewChild I have read about articles in angular6, 3 ways to communicate in child to parent.if its wrong,please demonstrate if possible 1)output emitter 2)using viewchild 3)shared Service. So here i need to understand how to communicate the viewchild from child to parent. In below demo, have created a form in child component,when child component form is valid, that should be reflected in parent component.In this demo when components gets loaded in ngafterViewInit hook the view child value , its working as expected , but when type some thing , child component form is valid,button enabled in child form ,those changes not reflected in the parent component which needs to valid , but its not working as expected. can anyone give the best approach? parent component.html <h1> Parent Component</h1> <button class="btn btn-danger " disabled="{{check}}">CheckParentEnable</button> <div class="childComponent...