Project: codever - File: snippet-form.base.component.ts

In the router.navigate method place the object /data in the state field of the navigation extras parameter

//  constructor( protected router: Router) {}

  navigateToSnippetDetails(snippet: Codelet, queryParams: Params): void {
    const link = [`./my-snippets/${snippet._id}/details`];
    this.router.navigate(link, {
      state: {snippet: snippet},
      queryParams: queryParams
    });
  }

To receive on the the other end of the line, just look for it in window.history.state

  ngOnInit(): void {
    this.popup = this.route.snapshot.queryParamMap.get('popup');
    this.snippet$ = of(window.history.state.snippet);
    if (!window.history.state.snippet) {
      this.userInfoStore.getUserInfo$().subscribe(userInfo => {
        this.userId = userInfo.sub;
        this.codeletId = this.route.snapshot.paramMap.get('id');
        this.snippet$ = this.personalCodeletsService.getPersonalCodeletById(this.userId, this.codeletId);
      });
    }
  }

Reference - https://angular.io/api/router/NavigationExtras


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Project: codever

Use the queryParams extra parameter of the router navigate method:

  constructor(private router: Router,
              private httpClient: HttpClient) {
    this.publicSnippetsApiBaseUrl = environment.API_URL + '/public/snippets';
  }

  getPublicSnippetById(snippetId: string): Observable<Codelet> {
    return this.httpClient
      .get<Codelet>(`${this.publicSnippetsApiBaseUrl}/${snippetId}`).pipe(
        catchError(() => {
          this.router.navigate(['/404-snippet'],
            {
              queryParams: {snippetId: snippetId}
            });
          return throwError('Error 404');
        }));
  }

On the receiving side you can extract the parameter from the ActivatedRoute’s queryParamMap property

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '  <div id="about-content" class="jumbotron"><h5>Snippet with the id "" was not found - the submitter might have deleted it</h5> </div>'
})
export class SnippetNotFoundComponent {
  snippetId: string;

  constructor(private route: ActivatedRoute) {
    this.snippetId = this.route.snapshot.queryParamMap.get('snippetId');
  }
}

Reference - https://angular.io/guide/router#activated-route


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Project: codever - File: public-routing.module.ts

The ** wildcard has to be defined as a child of the root you want redirected back to. Thus URLs like https://www.codever.land/snippets/60046e4554aac471e0799da7/some-mongo-title-here will still “point” to https://www.codever.land/snippets/60046e4554aac471e0799da7:

  {
    path: 'snippets/:id',
    component: PublicSnippetDetailsComponent,
    children: [
      // This is a WILDCARD CATCH-ALL route that is scoped to the "/snippets/:snippetid"
      // route prefix. It will only catch non-matching routes that live
      // within this portion of the router tree.
      {
        path: '**',
        component: PublicSnippetDetailsComponent
      }
    ]
  },

Reference - https://angular.io/guide/router#setting-up-redirects


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

You might need to update a dependency only in your package-lock.json file, because there might be a security vulnerability for the version you use but you can’t update the dependency in your package.json that uses that dependency. You can use --no-save and --package-lock-only options as in the example below

npm install y18n@4.0.1 --no-save --package-lock-only

Reference - https://docs.npmjs.com/cli/v6/configuring-npm/package-locks


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Just use the simple quotes ' and + sign inside the double quotes of the html attribute value. See the value of the href attribute below:

<div class="float-right mt-1">
  <a
    *ngIf="snippet.public"
    type="button" class="btn btn-light btn-sm float-right"
    href="mailto:?subject=Code snippet: &body=https://www.codever.land/snippets/"
    title="Share link to snippet via Email">
    <i class="far fa-envelope"></i> Email
  </a>
</div>

Reference - https://github.com/codeverland/codever


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.