Posts

Showing posts with the label angular5

CORS issue in Twitter OAuth API [duplicate]

CORS issue in Twitter OAuth API [duplicate] This question already has an answer here: I am implementing twitter signin in angular5. To get access token from client side i am following https://developer.twitter.com/en/docs/twitter-for-websites/log-in-with-twitter/guides/implementing-sign-in-with-twitter I am getting Cross Origin error on accessing twitter apis. Failed to load https://api.twitter.com/oauth/request_token: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 400. This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. 1 Answer 1 The guide you are following is designed for use with server-side code. It will not work f...

get the data from the server in Angular5

get the data from the server in Angular5 How to get the data from Server using Angular5. i want to about Get call in Angular5 i tried this: getField (): Observable<b_fld> { return this.http.get<fld>(this.fieldUrl) .pipe( tap(fields => console.log(`fetched fields`)) ); } 1 Answer 1 The way I do it is. This is my service.ts set up. service.ts import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; Import the HttpClient and HttpHeaders and then set them up like below HttpClient HttpHeaders accessToken; apiUrl = environment.apiUrl; // Url Reads http://my-api.com // Only Needed if you have headers headers = new HttpHeaders() .set('Authorization', this.accessToken); constructor( private http: HttpClient ) { } getMyData(): Observable<any> { return this.http.get( thi...

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

Chart js background color changes on click

Image
Chart js background color changes on click I have stacked bar in built with chart js. The bar has three rows with the top row background set as white like below. The above works fine and this is how i set this.barChart.datasets = [ { label: myLabels1, data: myData1, dataLabel: ['', ''], backgroundColor: ['#FFC500', '#673AB6'] }, { label: totalLabels, data: totalData, backgroundColor: ['#FFFFFF', '#FFFFFF'] } ]; The above works fine as i want it to . The problem occur when i click on the bar . It adds a background color on top of the existing color like below. The bgColor appear like a shadow below because the top row is white hence the shadow. I have tried everything possible to disable this change all to no avail. I tried playing with the click event of the chart yet nothing works. Please how do i disable such effect? From where does it come from ? Any help would be ...

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

angular 5 production release css files reference issue

angular 5 production release css files reference issue Similar issues are there but I couldn't find any working solution for this. I cant build my app with production(ng build --prod --base-href /demo/). instead of that I user only ng build(ng build --base-href /demo/) and deployed to my local IIS. Rewrite URL part is also added to web.config. My published URL is "http://localhost/demo/" and still the css reference URL is set to "http://localhost/assets/css/loader-la-ball-clip.css" I added the css references to angular-cli.json too. does anybody know a solution for this ? does this happen due to development build ? "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "./assets/css/loader-la-ball-clip.css", "./assets/css/bootstrap-datepicker.css", "styles.scss" ...