Use the export keyword:

import { SearchDomain } from './search-domain.enum';

export const searchDomains: any = new Map([
  [SearchDomain.MY_BOOKMARKS, 'My Bookmarks'],
  [SearchDomain.PUBLIC_BOOKMARKS, 'Public Bookmarks'],
  [SearchDomain.MY_SNIPPETS, 'My Snippets'],
  [SearchDomain.PUBLIC_SNIPPETS, 'Public Snippets']
]);

In the consumer file we import it:

import { searchDomains } from '../../core/model/search-domains-map';

export class SearchbarComponent implements OnInit {
    searchDomains = searchDomains;
    //...
}

Reference - https://www.typescriptlang.org/docs/handbook/modules.html

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.

Use the regular Map constructor to transform a 2D key-value Array into a map

const searchDomains: any = new Map([
  [SearchDomain.MY_BOOKMARKS, 'My Bookmarks'],
  [SearchDomain.PUBLIC_BOOKMARKS, 'Public Bookmarks'],
  [SearchDomain.MY_SNIPPETS, 'My Snippets'],
  [SearchDomain.PUBLIC_SNIPPETS, 'Public Snippets']
]);

searchDomains.get(SearchDomain.MY_BOOKMARKS) // returns "My Bookmarks"

Use Array.from() to transform a map into a 2D key-value Array

console.log(Array.from(searchDomains)) // Will show you exactly the same Array as kvArray

Reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

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.

Recently I have just added the possibility to share your code snippets with the world on Bookmarks.dev. I have noticed that the code to create and update code snippets, was too intertwined - trying to avoid code duplication I used initially just one component to create and update code snippets. Now, I just could not stand the too many conditional checks anymore, so I decided to split the functionality in two parts

• one for handling updating and copy to mine, and the second for creating new snippets.

Because there is still some common functionality in both, like handling autocompletion of tags, I decided to use Angular component inheritance to avoid code duplication. In this blog post I will just show code examples for inheritance and name the angular inheritance particularities.

Source code for codever.land is available on Github - Star

The @XmlAccessorType(XmlAccessType.FIELD) is required if you set @XmlElement annotations on the fields instead of the getters methods

package dev.bookmarks.example;

import java.util.List;
import javax.xml.bind.annotation.XmlAccessType;
import javax.xml.bind.annotation.XmlAccessorType;
import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

@XmlAccessorType(XmlAccessType.FIELD)
@XmlRootElement(name = "bookmarks")
public class BookmarksResponse {

  @XmlElement(name = "bookmark", type = BookmarkDto.class)
  private List<BookmarkDto> bookmarks;

  public BookmarksResponse () {
  }

  public BookmarksResponse (List bookmarks) {
    this.bookmarks= bookmarks;
  }

  public List<BookmarkDto> getAllBookmarks() {
    return bookmarks;
  }

  public void setBookmarks(
      List<Bookmark> bookmarks) {
    this.bookmarks= bookmarks;
  }
}

The BookmarkDto class (getters and setters not shown for brevity):

package dev.bookmarks.example;

import com.fasterxml.jackson.annotation.JsonProperty;
import javax.xml.bind.annotation.XmlAccessType;
import javax.xml.bind.annotation.XmlAccessorType;
import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;
import lombok.EqualsAndHashCode;
import lombok.ToString;

@EqualsAndHashCode
@ToString
@XmlRootElement(name = "bookmark")
@XmlAccessorType(XmlAccessType.FIELD)
public class BookmarkDto {

  @JsonProperty("id")
  @XmlAttribute(name = "id")
  Integer id;

  @JsonProperty("name")
  @XmlAttribute(name = "name")
  String name;

  @JsonProperty("url")
  @XmlAttribute(name = "url")
  String url;

  public BookmarkDto() {
  }

 //getters and setters hidden for brevity
}

Would result in an xml response if you request with the Accept header as Accept: application/xml as the following

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<bookmarks>
    <boomark id="1">
      <name>How to filter results list in Angular with input text</name>
      <url>https://www.codepedia.org/ama/how-to-filter-results-in-angular-example-with-input-text</url>
   </bookmark>
    <boomark id="2">
      <name>Complete example of a CRUD API with Express GraphQL</name>
      <url>https://www.codepedia.org/ama/complete-example-crud-api-express-graphql</url>
   </bookmark>
</bookmarks

The Accept: application/json response should look like the following

{
    "bookmarks": [
        {
            "id": 1,
            "name": "How to filter results list in Angular with input text",
            "url": "https://www.codepedia.org/ama/how-to-filter-results-in-angular-example-with-input-text"
        },
        {
            "id": 2,
            "name": "Complete example of a CRUD API with Express GraphQL",
            "url": "https://www.codepedia.org/ama/complete-example-crud-api-express-graphql"
        }
   ]
}

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.

Use a global replace with \W+ option ( \W+ means any sequence of non-word characters)

    private generateDashBasedUrlPathFromTitle(title: string) {
        return title.trim().replace(/\W+/g, '-').toLowerCase();
    }

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.