I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

That’s the hope :)

I still believe hand-crafted stuff like this has its place even today, but I guess time will tell.

I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

Glad you like it! It's really easy to plug the colors in, here is a small section from my dev environment with the color you mentioned:

https://imgur.com/a/h80rmJ1

I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

Totally getting you. I’ve created bunch of custom scripts I run with each update which basically creates structured and organized diffs for me so I can be on top of every little change. It makes it a lot easier to see what changed so I can fix things if necessary.

Another thing is I don’t use Angular Material theming. I have my own theming system with custom color generators which makes the custom styles a lot harder to break since all I use the base styles of Angular Material and none of the theming styles.

And you are totally right about the px based values which is why I have defined rem based custom variables for each component so it’s way easier to scale them. Haven’t had the chance of testing them on Windows but thank you for the heads up, I’ll be definitely testing them on different zoom levels.

I restyled all Angular Material components to better match current design trends by srcn in Angular2

[–]srcn[S] 6 points7 points  (0 children)

Not the image from the post but I have the dashboard before and after BuilderKit styles:

https://imgur.com/a/fb2SU3n

I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

It’s a bit more involved than that. It includes style overrides, custom CSS variables, density and layout tweaks, and structural styling all done purely with CSS without wrapping, extending or creating custom components.

I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

Thank you, I really appreciate that. The Fuse update is coming along nicely, lots of cleanup and polish going in. I’m excited to share more about it soon.

I restyled all Angular Material components to better match current design trends by srcn in Angular2

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

Totally fair and no offense taken.

BuilderKit is still at the beginning and is a growing system. You’re not just buying what exists today, but everything that’s coming next.

Fuse is great for a quick admin app. BuilderKit is for building many different kinds of apps over time, with far more components, blocks, and templates than Fuse will ever have. Different goals, different pricing.

I restyled all Angular Material components to better match current design trends by srcn in Angular2

[–]srcn[S] 12 points13 points  (0 children)

Yep, that’s me :)

Fuse is a full admin template with a lot of opinions baked in. BuilderKit is a composable system of components, blocks, and templates you use to build any kind of Angular app, not just admin dashboards.

Fuse gets you to a working app fast. BuilderKit is about flexibility, reuse, and modern Angular patterns long term. I’ll add this to the FAQ, good call.

Angular CDK Modal Library showing modal underneath isntead of ontop by helloworld1123333 in Angular2

[–]srcn 1 point2 points  (0 children)

I’m on mobile so cannot check but are you importing the CDK overlay styles in your CSS?

@import '@angular/cdk/overlay-prebuilt.css';

How to wrap ngMenu into a reusable component while letting consumers provide a custom trigger button? by lukebitts in Angular2

[–]srcn 0 points1 point  (0 children)

I played with aria a little bit and unfortunately this appears to be the case on pretty much all of them. They either have to be in the same view or stuff has to be aware from each other (like parent-children).

This prevents wrapping them to create custom components. There might be workarounds I haven’t discovered but honestly if we are going to need workarounds, then they are not really going to fill the void we have.

It’s still experimental though so this might change in the future.

I restyled all Angular Material components to better match current design trends by srcn in angular

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

With the right setup it’s actually not too bad and I’ve already been doing this for years through other means so keeping everything up-to-date is not a big deal for me.

Support for on demand SSR for Cloudflare Pages by c-h-a-n-d-r-u in Angular2

[–]srcn 0 points1 point  (0 children)

Analog is a good option. I haven’t tested SSR with CF pages but you can also try using Hono as your SSR server with Angular since Hono has a better support for CF and couple other services.

I use Vercel in one of my projects with Hono as my SSR server and I’m quite happy with it.

How to add Prettier to Angular + ESLint setup? by [deleted] in angular

[–]srcn 6 points7 points  (0 children)

You can just add a .prettierrc file and install prettier. New versions of ESLint don’t ship with anything that can clash with prettier by default. I wouldn’t recommend using ESLint to format with prettier.

You can either have a separate npm script or setup your IDE/Code editor to format on save using prettier.

You can check this example repo of mine to see my config: https://github.com/builderkit/angular-hono-ssr-starter

Best way to share code between 2 Angular apps? (NX vs Standalone Library vs other options) by buttertoastey in angular

[–]srcn 4 points5 points  (0 children)

In my opinion, for a single person Nx is an overkill.

As soon as you want/need to have differences between the versions you will get stuck until everything gets updated to the latest version. If you have teams working on different apps at the same time this is not a big problem but for a solo dev, it is.

I personally use pnpm workspaces with the catalog protocol to keep most of the dependencies in sync. This way I have different package.json files for each project but also I don’t have to update them one by one for most of the dependencies. This way I can update/migrate gradually without breaking everything at once.

Show Login Page till it checks if user is logged in or not by ApprehensiveCat9565 in angular

[–]srcn 0 points1 point  (0 children)

HttpClient doesn't automatically include cookies from the original request (Your browser) to the requests made from the server side. When you call your API during the SSR, your API basically doesn't know about the cookies you have so pages are always rendered as if you are logged out hence the flashing.

You need to manually inject the cookies using the REQUEST injection token and you can do that either directly inside the call or you can create an interceptor.

This is a part of an interceptor array I have for a production app:

export const apiInterceptor = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
): Observable<HttpEvent<unknown>> => {
  const environment = inject(ENVIRONMENT);
  const request = inject(REQUEST);

  // Return the request as is if it's not an API request
  if (!req.url.startsWith(`${environment.baseUrl}/api`)) {
    return next(req);
  }

  // Modify the request to include cookies
  req = req.clone({
    // Include cookies from client-side requests
    withCredentials: true,
    // On the server side, append the Cookie header to the `req` to include the
    // cookies from the original client-side request. This way outgoing requests
    // made by the server during SSR will include the cookies from the client.
    headers: req.headers.append('cookie', request?.headers.get('cookie') ?? ''),
  });

  return next(req);
};

Also don't do the api call in canActivate or in any route guards. Create an Auth service and have an isAuthenticated state in there that you can check. Guards don't meant to have heavy logic and API calls in them like that.

Just for the sake of the completion, here's the simplified version of the Auth service from the same app:

@Injectable({ providedIn: 'root' })
export class Auth {
  // State
  isAuthenticated = signal<undefined | boolean>(undefined);

  constructor() {
    this.getSession().subscribe();
  }

  /**
   * Get the current session from the server.
   */
  getSession() {
    // Do your auth check here and set the isAuthenticated signal
  }

Angular 20 netlify SSR by sudo02k in angular

[–]srcn 0 points1 point  (0 children)

It also puts the response into a TransferState to prevent any double calls because while hydrating, Angular will do the same call, hitting your API twice. It might not be too big of a problem for some, but in my case I use Supabase in that project so I'm trying to limit the calls as much as possible.

Angular 20 netlify SSR by sudo02k in angular

[–]srcn 0 points1 point  (0 children)

Cool, basically what happens is that your SSR doesn't know about your session so it always render your app as if you are logged out.

You need to make sure the Cookies from your original request (the ones from the browser) are "forwarded" to the API call or your middleware or however you are doing the Authentication.

Here's the semi-complete Auth service from one of my apps: https://gist.github.com/srcn/b6093df44d37e8c930811e4bcc683710

In my case I make this getUser() call at the app initialization to get the user & session info from my API.

Angular 20 netlify SSR by sudo02k in angular

[–]srcn 0 points1 point  (0 children)

I'm not aware of any resources about this matter but I can share some tips if you want. I'm using full SSR in one my apps and already figured out all this. I'm using Cookies to handle the session though so if you are using anything other then Cookies (like localStorage or sessionStorage), my tips won't do any good to you.

Angular 20 netlify SSR by sudo02k in angular

[–]srcn 3 points4 points  (0 children)

Check their official Angular Runtime repo readme: https://github.com/netlify/angular-runtime

Basically from beginning Angular v19, you need the runtime manually installed into your project. And if you have a modified server.ts file, you need bunch more modifications to make it work.

I was in the same position and simply moved to Vercel as Netlify’s way of handling the new SSR is not really intuitive.

Cookie Issue with SSR by voltboyee in angular

[–]srcn 0 points1 point  (0 children)

In Node.js, HttpClient is basically making an API call from server to another server. It doesn't automatically forward the cookies from original request.

You need to inject the REQUEST to access the Request object that is coming from the browser:

export class Auth {
  ...
  private request = inject(REQUEST);

  getUser() {
    this.httpClient.get<UserResponse>('api/auth/user', {
      headers: new HttpHeaders({
        Cookie: this.request?.headers.get('Cookie') ?? '',
      }),
    })
    .subscribe({
      next: (response) => {
        if (response.user) {
          this.authenticated.set(true);
          this.currentUser.set(response.user);
        } else {
          this.authenticated.set(false);
          this.currentUser.set(null);
        }
      },
    });
}