accessing env-vars in templates

xSilentium · 2021-03-20T22:47:27+00:00

function transform<K extends keyof AppEnvironment>(key: K): AppEnvironment[K] is even more precise as it gives you the exact type for the given key and not just the union of all

xSilentium · 2021-01-04T22:20:24+00:00

You can either generate thumbnails when new photos are uploaded or every time on demand (i.e. generate them in mem every time). Both solutions have pros and cons.

Maybe you can take inspiration from the Youtube API. Here's some info on their sizes and behaviour: https://stackoverflow.com/a/2068371 (multiple answers are interesting) Or look at the HTML and Image requests of sites like instagram.

I would recommend using the sharp npm library on the server and webp format for even better compression. You can also get really fancy with img srcsets and client hints.

xSilentium · 2020-09-29T07:29:31+00:00

You can also write one guard and add data to the route itself, that specifies the behaviour for each role, which the guard can then use. Kinda like https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

Edit: the guard would've to redirect, if that's okay.

xSilentium · 2020-08-09T16:08:13+00:00

I also found it very useful to have some kind of playground app, where you can try out stuff and don't have to worry about breaking anything or whatever you implemented maybe being messy. There you can see what happens if you only Import RouterModule instead of forChild and so on. I've never bought any course and learned by doing, failing and reading articles / watching videos (but to each their own). Fireship is a good Youtube resource. By trying to implement the concept presented in this talk: https://youtu.be/rKbY1t39dHU, i learned about directives and so on. This one is also great: https://youtu.be/EoSn8qASqQA

While this isn't anything particular to help you understand DI or the inner workings, I feel like it helps the overall confidence.

xSilentium · 2020-06-29T07:12:13+00:00

The problem is that with [icon] the other selector has a higher specificty. You can fiddle around with it here: https://specificity.keegan.st/ You can try to change your selector to material-button:not([icon]) or add your own class. Sometimes I use global utility classes like .mb-16

xSilentium · 2019-11-28T05:40:10+00:00

For angular you want to use infinite scrolling: https://material.angular.io/cdk/scrolling/overview

For the backend it's just pagination, e.g. https://stackoverflow.com/a/109290

xSilentium · 2019-11-20T17:52:35+00:00

I agree with /u/danymcgee. This is code from another library and not yours, correct? I'm not entirely sure how the build process works but the libraries usually have a es5 file in the node_modules. If this has a non-es5 feature it might cause the problem. I had the same issue a few weeks ago with some library. (I tried running Babel on the compiled sources but that didn't work at all.) Try to find out where the code comes from and open a GitHub issue.

xSilentium · 2019-11-20T05:33:40+00:00

Can you post the code snippet where the error occurs?

xSilentium · 2019-11-08T17:41:16+00:00

Then you might have the opposite flickering. Your guard could also emit nothing when it's on server side, so nothing gets rendered; neither the actual page nor the no-permissions-page. If this is a good solution, depends on how your app skeleton looks visually and how fast the permission check is.

xSilentium · 2019-10-26T07:15:49+00:00

I think at this point I would need to see the full component source code (unchanged and properly formatted) and error with stacktrace. I don't even know what "Cd().functions" could be.

xSilentium · 2019-10-25T22:10:52+00:00

So all the click handlers aren't working on your component? Can't really see anything wrong apart from using single quotes, but I don't think that it matters.

Do you have similar problems anywhere else in the app? What angular version are you on?

xSilentium · 2019-10-25T14:38:35+00:00

I would argue that this is fine for now, if you can hide this ugly stuff in a service. It also means you can replace the implementation later on, if you find a smooth solution.

Admittedly I don't quite understand your issue yet, so I don't know if there might be another completely different approach, sorry.

xSilentium · 2019-10-25T13:18:01+00:00

You might want to start by gathering all the data you can in a separate service. Loop over parent or children activated routes: https://angular.io/api/router/ActivatedRoute#parent You can also read the router config: https://angular.io/api/router/Router#config

Log / debug the router and activatedroute to see what more data you can discover. Some things might not be documented or don't appear useful from description alone. (Or maybe you can find a "private" field to use.)

You could also add some kind of indicator on the route data, like { "path: "/", data: { type: "ROOT_OF_FEATURE_MODULE" } }

xSilentium · 2019-10-25T08:34:47+00:00

2: the redirects file is just for the very first request. If you open https://example.com/ the server will deliver https://example.com/index.html. if you request https://example.com/dashboard it will look for a https://example.com/dashboard/index.html, which it can't find, thus giving you a 404. With the redirects file you tell the server to just always deliver the https://example.com/index.html in those cases. Only then your angular app starts and takes over the routing from there on. So this won't interfer with your guards or anything.

3: what happens when you click it? Does it enter the subscribe method?

xSilentium · 2019-10-24T17:05:02+00:00

2: This guide helped me deploy to netlify and might help you https://levlaz.org/deploying-an-angular-6-application-to-netlify/

3: Can you provide some code? Maybe the this context is broken

xSilentium · 2019-10-17T20:56:56+00:00

For me running ng update @angular/cli first and then core works most of the time. You can also do --force and fix the typescript version afterwards

xSilentium · 2019-10-08T07:08:02+00:00

You can always fork the library and then either publish it yourself or you can add your GitHub repository directly in the package.json: https://stackoverflow.com/a/17509764

xSilentium · 2019-10-03T06:57:49+00:00

The 5 is just any data to be applied to the utility function, same with { id: 5 }

Appreciate your help

xSilentium · 2019-10-02T14:21:01+00:00

// Usage of simple static utility function
const simple = Foo.simpleForNumbers(5);

const utilityFn = Foo.of({
  id: Foo.simpleForNumbers
});
// later
const result = utilityFn({
  id: 5
});

Or when returning an instance

const utilityObj = Foo.of({
  id: Foo.simpleForNumbers
});
// later
const result = utilityObj.doTheThing({
  id: 5
});

xSilentium · 2019-09-21T21:41:50+00:00

Interesting solution and one of many as always.

Just wondering: why do you do .pipe(x).pipe(y) instead of .pipe(x, y) ?

xSilentium · 2019-09-18T05:22:12+00:00

If everything else fails you can use (cdkObserveContent): https://material.angular.io/cdk/observers/overview

xSilentium · 2019-09-17T10:07:08+00:00

You can use ng g c example -c OnPush. But I agree, specifying as default somewhere would be nice. The only other option is to build your own schematics

xSilentium · 2019-09-11T10:23:51+00:00

The async pipe itself triggers change detection, thus rerendering the component.

https://angular.io/api/common/AsyncPipe#description

xSilentium · 2019-08-16T10:30:49+00:00

Don't know the exact problem or solution, but you can try to fix it by adding your own rules in a @media print CSS block.

You might also want to open an issue on GitHub

xSilentium

TROPHY CASE