{"id":2940,"date":"2020-12-21T21:23:00","date_gmt":"2020-12-22T02:23:00","guid":{"rendered":"https:\/\/www.mymiller.name\/wordpress\/?p=2940"},"modified":"2021-01-01T23:13:43","modified_gmt":"2021-01-02T04:13:43","slug":"tips-tricks-for-an-angular-material-library","status":"publish","type":"post","link":"https:\/\/www.mymiller.name\/wordpress\/angular\/tips-tricks-for-an-angular-material-library\/","title":{"rendered":"Tips\/Tricks for an Angular Library"},"content":{"rendered":"\n

Using Angular Material in the Lib<\/h2>\n\n\n\n

I needed to create a library mymiller-angular<\/a> for a project I’ve been working on, that would provide components built around Angular Material that could be reused. After much searching, I came to the conclusion that the documentation for doing this is abysmal. Hopefully, I am able to clarify some of the steps to make this easier in the future.<\/p>\n\n\n\n

  1. Don’t add your material libraries to your <dependencies> section in your package.json. Instead add them to the <devDependencies> section. <\/li>
  2. Provide instructions for your library on what modules from Angular Material needs to be imported into the main project with your library.<\/li><\/ol>\n\n\n\n

    I learned the hard way with pages not loading, when I included the Angular Material libraries as part of my library. The two small steps above and I had it working. However I had to piece this together from a number of different websites. <\/p>\n\n\n\n

    Singleton Service<\/h2>\n\n\n\n

    So you need to add a singleton service to your library. Again this is where I found documentation and advice was wrong. Create your service and export it in your public-api.ts file.<\/p>\n\n\n\n

    Make sure your service has this:<\/p>\n\n\n\n

    @Injectable({\r\n  providedIn: 'root'\r\n})<\/code><\/pre>\n\n\n\n
    DO NOT ADD<\/span><\/strong> it to the providers[] array in your module.ts file.  Leave it out entirely of your module.ts file.  Then add it to the provider’s array in your main application’s module.ts file.  This will allow only a single instance of your service to exist.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Tips and tricks for building an Angular Material Library.<\/p>\n","protected":false},"author":1,"featured_media":2941,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[281],"tags":[269,270],"series":[283],"class_list":["post-2940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-material","series-angular"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/start-2465624_640.jpg?fit=640%2C425&ssl=1","jetpack-related-posts":[{"id":2511,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-environment\/","url_meta":{"origin":2940,"position":0},"title":"Angular Environment","author":"Jeffery Miller","date":"March 11, 2019","format":false,"excerpt":"Building a website for today and tomorrow begins with Angular. Yes I am a proponent of Angular over many other client frameworks. Let's look over the goals of this post to help you get started. Node.jsAngular-CliAngular Workspace Angular Material Installing Node.js First step you need to do is to install\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2657,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-grid-layout-responsive\/","url_meta":{"origin":2940,"position":1},"title":"Angular Material Grid Layout Responsive","author":"Jeffery Miller","date":"December 16, 2019","format":false,"excerpt":"Angular Material is a powerful extension onto Angular for UI design. I personally fell in love with it before I ever used it. When I started using it I knew I would find things I would want to improve. Material Grid List is so handy to use and makes layouts\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":2940,"position":2},"title":"Angular Material String Component","author":"Jeffery Miller","date":"January 4, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit\/Delete of a string using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2946,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-checkbox\/","url_meta":{"origin":2940,"position":3},"title":"Angular Material Checkbox","author":"Jeffery Miller","date":"January 11, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit of a checkbox using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3029,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-loading-spinner\/","url_meta":{"origin":2940,"position":4},"title":"Angular Material Loading Spinner","author":"Jeffery Miller","date":"May 3, 2021","format":false,"excerpt":"Just about every project I need to have at least one loading spinner to indicate to the user that data is being loaded and to wait. My recent project I found that to be no exception. I wanted to come up with something that I thought was a little nicer\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2967,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/translations-in-a-angular-library\/","url_meta":{"origin":2940,"position":5},"title":"Translations in a Angular Library","author":"Jeffery Miller","date":"January 1, 2021","format":false,"excerpt":"Developing a UI library for Angular, I had strings that needed be hardcoded. The question became how do I deal with them. I did not want to embed in ngx-translate into the library. I wanted the user to have the ability to modify the strings as well. So I created\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/comments?post=2940"}],"version-history":[{"count":4,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2940\/revisions"}],"predecessor-version":[{"id":2991,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2940\/revisions\/2991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/2941"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=2940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=2940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=2940"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=2940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}