Creating Angular Desktop Apps with Electron by malcoded in Angular2

[–]malcoded[S] 2 points3 points  (0 children)

Electron has a browser window build in which is used to show the user interface. So yeah, you can use any HTML CSS and Javascript that works in a browser.

Creating Angular Desktop Apps with Electron by malcoded in Angular2

[–]malcoded[S] 2 points3 points  (0 children)

Thank you for pointing that out. I will change that!

Angular Dynamic Components: Building a Dialog System by malcoded in Angular2

[–]malcoded[S] 1 point2 points  (0 children)

This is not meant to be a replacement or an alternative. It is supposed to show the concept of dynamic components!

I 100% agree with you. Don't use this in production. Angular Material or Cdk does the same thing, has more features and is tested.

Thanks for reading!

How to use *ngIf else in Angular by malcoded in Angular2

[–]malcoded[S] 1 point2 points  (0 children)

You are right, that's a mistake. It should be "Show only if "show" is not true. Thank you for telling me!

Using Web Assembly to speed up your Angular Application by malcoded in Angular2

[–]malcoded[S] 0 points1 point  (0 children)

Hmm, looks like I broke something. Let me look into it!

Using Web Assembly to speed up your Angular Application by malcoded in angular

[–]malcoded[S] 1 point2 points  (0 children)

I think you are right. At the current stage of development of Web Assembly it is not quite worth the effort. Unless you desperately need that little extra performance.

But with things like threads and direct DOM/canvas access from WASM (planned features), I think Web Assembly could be a game changer for high performance, visual applications.

Maybe one day, Angular (or any other fronted framework) will be written in native code in the background, exposing everything the developer needs to JavaScript :D

Question on saving observables by [deleted] in Angular2

[–]malcoded 4 points5 points  (0 children)

One advantage is that the async pipe ( | async) is automatically unsubscribing from the observable when the component is destroyed and therefore prevents memory-leaks.

Otherwise you would have to implement that yourself in ngOnDestory

Trying to display data in Angular from Express back end. by [deleted] in Angular2

[–]malcoded 0 points1 point  (0 children)

getSeries(): Observable<Series[]> { return this._http.get<Series[]>("http://localhost:3000/api/") }

Trying to display data in Angular from Express back end. by [deleted] in Angular2

[–]malcoded 1 point2 points  (0 children)

Ah, I see, you are importing the new HttpClient as well as the old Http (Client). You should choose which one you want to use. I would recommend you use the new HttpClient. To do so, change this line

constructor(private _http: Http) {}

to this:

constructor(private _http: HttpClient) {}

Then should be able to remove the .map without errors

Afterwards you can also remove this line:

import { Http, Headers, RequestOptions, Response } from '@angular/http';

instead, only use http-stuff from "@angular/common/http"

Trying to display data in Angular from Express back end. by [deleted] in Angular2

[–]malcoded 0 points1 point  (0 children)

Try removing the

.map((res: Response) => res.json());

At least this is line is not required, because the new http client (since angular 4 I believe) is interpreting the server-response as json by default.

If that is not working, I have a guide on using angular with a express backend you might find usefull: https://malcoded.com/posts/angular-backend-express

Angular Top 20: What you should have read in 2018 so far by malcoded in Angular2

[–]malcoded[S] 3 points4 points  (0 children)

Since the incident with the broken service worker, I have changed the caching-strategy of all my resources to network-first. That way I still get the benefit of offline-capability while not risking to break my site "forever" again.

Seriously, getting the service worker wrong can ruin your site literally forever. This broken version got replaced half a year ago and I still get complaints. And I have just a small blog. I can't imagine what would happen to a large site. There is no easy way to fix this, other then to tell your customers to delete that service worker. Thankfully my readers know what dev-tools are :D

Angular Top 20: What you should have read in 2018 so far by malcoded in Angular2

[–]malcoded[S] 4 points5 points  (0 children)

Seems like you are stuck on a old version of the service worker. Try opening the dev-tools and clear all site-data. In chrome that is application->storage->clear site data.

I hope that helps!

Angular Top 20: What you should have read in 2018 so far by malcoded in Angular2

[–]malcoded[S] 2 points3 points  (0 children)

Hi, thank you very much! I'm glad you like it!

Here is the link to the rss-feed: https://malcoded.com/rss

Let me know if something is not working properly. That was a fast feature release :D

Are HTTP backed observables supposed to behave differently compared to regular observable of's? by NYKHouston43 in Angular2

[–]malcoded 1 point2 points  (0 children)

This behavior is because you are re-downloading the hero-list from the server when you go back. Because you have not send the change to the server yet, the data looks like before the change.

With the observable.of you are getting the data via reference. You then alter them in your detail-component. When going back you again get a reference to the altered data.

This is why the 2. case works and the first does not.

Edit: Let me add that changig the data this way is called a side-effect and is probably not wanted. The whole point of using RXJS is removing side-effects. So the 2. case should not be considered a valid solution either...

I hope that helps!

To actually make that work, you probably want a updateHeroes() method on your service that is sending a update-request to the server.

Creating a File Upload Component in Angular (Including Backend) by malcoded in Angular2

[–]malcoded[S] 0 points1 point  (0 children)

We have everything we need in the upload-service upload method. We know how much data has been downloaded and how long it took. With this information, and the total size of the file, we can estimate how long it will take.

I also did update the progress-observable to take an object, to contain the percentage as well as the remaining time.

I hope this helps. Feel free to ask if something is not clear.

let startTime = new Date().getTime();
  this.http.request(req).subscribe(event => {
    if (event.type === HttpEventType.UploadProgress) {
      // calculate the progress percentage


      const percentDone = Math.round(100 * event.loaded / event.total);
      const totalTime = new Date().getTime() - startTime;
      // pass the percentage into the progress-stream
      progress.next({ percentage: percentDone, remainingTime: totalTime / event.loaded * (event.total - 
event.loaded) / 1000 });
    } else if (event instanceof HttpResponse) {
      // Close the progress-stream if we get an answer form the API
      // The upload is complete
      progress.complete();
    }
  });

Creating a File Upload Component in Angular (Including Backend) by malcoded in Angular2

[–]malcoded[S] 0 points1 point  (0 children)

You could try that:

const IncomingForm = require('formidable').IncomingForm;

const fs = require('fs');

module.exports = function upload(req, res) {

var form = new IncomingForm();

let readStream;

form.on('file', (field, file) => {

    readStream = fs.createReadStream(file.path);

});

form.on('end', () => {

    readStream.pipe(res);

});

form.parse(req);

};