{"id":3022,"date":"2021-04-26T10:00:00","date_gmt":"2021-04-26T14:00:00","guid":{"rendered":"https:\/\/www.mymiller.name\/wordpress\/?p=3022"},"modified":"2021-04-21T22:10:13","modified_gmt":"2021-04-22T02:10:13","slug":"page-component-for-mobile-desktop","status":"publish","type":"post","link":"https:\/\/www.mymiller.name\/wordpress\/angular\/page-component-for-mobile-desktop\/","title":{"rendered":"Page Component for Mobile\/Desktop"},"content":{"rendered":"\n

I was recently building a set of pages, that I needed to be able to switch what was displayed based on whether I was on a Desktop or Mobile device. On a Mobile device I would change the layout of tables or limit certain features in order to provide a better experience on mobile. I created a few simple components to aid in this.<\/p>\n\n\n\n

import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-page-content',\n  template: `<ng-content><\/ng-content>`,\n  styleUrls: ['.\/page-content.component.scss']\n})\nexport class PageContentComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}<\/code><\/pre>\n\n\n\n
This would create wrapper for <app-page-content><\/app-page-content>.  The content would be display on any page regardless of mobile or desktop.  <\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-page-content-desktop',\n  template: `<ng-content><\/ng-content>`,\n  styleUrls: ['.\/page-content-desktop.component.scss']\n})\nexport class PageContentDesktopComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}<\/code><\/pre>\n\n\n\n
This is a wrapper for <app-page-content-desktop><\/app-page-content-desktop>.  This content would only be displayed on a Desktop device.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-page-content-mobile',\n  template: `<ng-content><\/ng-content>`,\n  styleUrls: ['.\/page-content-mobile.component.scss']\n})\nexport class PageContentMobileComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}<\/code><\/pre>\n\n\n\n
Big surprise another wrapper for <app-page-content-mobile><\/app-page-content-mobile>.  This is only shown on a mobile device.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-page-actions',\n  template: `<ng-content><\/ng-content>`,\n  styleUrls: ['.\/page-actions.component.scss']\n})\nexport class PageActionsComponent implements OnInit {\n  constructor() { }\n  ngOnInit(): void {\n  }\n}<\/code><\/pre>\n\n\n\n
Now I need to have a consistent set of controls at the top of may page.  I created this wrapper here for <app-page-actions><\/app-page-actions>.  This would hold my actions I want to provide for the page.<\/p>\n\n\n\n
import {Component, Input} from '@angular\/core';\n\n@Component({\n    selector: 'app-page',\n    templateUrl: '.\/page.component.html',\n    styleUrls: ['.\/page.component.scss']\n})\nexport class PageComponent {\n    @Input('title') title: string;\n    @Input('icon') icon: string;\n\n    constructor() {\n    }\n}<\/code><\/pre>\n\n\n\n
Now all of this came together for page-component.ts file that provide the <app-page><\/app-page> wrapper.  All the other wrappers were child inside of this wrapper.  This was the brains of the set of components that would decide where to place all of the children components and when. <\/p>\n\n\n\n
Notice I had it taking a page title, and an angular material icon to display on the page.  <\/p>\n\n\n\n
.grid-container {\n  margin: 20px;\n}\n\n.dashboard-card {\n  position: absolute;\n  top: 15px;\n  left: 15px;\n  right: 15px;\n  bottom: 15px;\n}\n\n.more-button {\n  position: absolute;\n  top: 5px;\n  right: 10px;\n}\n\n.dashboard-card-content {\n  text-align: center;\n}\n\n.dashboard-controls {\n  float: right;\n}<\/code><\/pre>\n\n\n\n
Styling was pretty simple.  Keep things simple and consistent look between all pages.<\/p>\n\n\n\n
<div class=\"grid-container\">\n    <h1 class=\"mat-h1\">\n        <mat-icon class=\"material-icons color_standout  menu-card-icon\">{{icon}}<\/mat-icon>\n        {{title}}\n        <div class=\"dashboard-controls\">\n            <ng-content select=\"app-page-actions\"><\/ng-content>\n        <\/div>\n    <\/h1>\n    <ng-content select=\"app-page-content\"><\/ng-content>\n    <ng-content select=\"app-page-content-desktop\" *onSize=\"['xl','lg','md']\"><\/ng-content>\n    <ng-content select=\"app-page-content-mobile\" *onSize=\"['xs','sm']\"><\/ng-content>\n<\/div><\/code><\/pre>\n\n\n\n
Here is the HTML that assembles all the pieces together to create your layout for Desktop v’s Mobile.  Now take notice I am using my *onSize<\/a> here to switch to desktop on md, lg, and xl screen sizes, this for mobile xs, and sm.<\/p>\n\n\n\n
Usage of this would be like the following:<\/p>\n\n\n\n
<app-page>\n     <app-page-actions>\n          <p>My Actions<\/p>\n     <\/app-page-actions>\n     <app-page-content>\n          <p>Shown on all devices<\/p>\n     <\/app-page-content>\n     <app-page-content-desktop>\n          <p>Shown on all desktop<\/p>\n     <\/app-page-content-desktop>\n     <app-page-content-mobile>\n          <p>Shown on all desktop<\/p>\n     <\/app-page-content-mobile>\n<\/app-page><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
I was recently building a set of pages, that I needed to be able to switch what was displayed based on whether I was on a Desktop or Mobile device. On a Mobile device I would change the layout of tables or limit certain features in order to provide a better experience on mobile. I […]<\/p>\n","protected":false},"author":1,"featured_media":3023,"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],"series":[],"class_list":["post-3022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1","jetpack-related-posts":[{"id":3029,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-loading-spinner\/","url_meta":{"origin":3022,"position":0},"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":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":3022,"position":1},"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":2988,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-structural-directive-onsize\/","url_meta":{"origin":3022,"position":2},"title":"Angular Structural Directive onSize","author":"Jeffery Miller","date":"January 18, 2021","format":false,"excerpt":"Creating an angular structural directive to operate on screen resolution.","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\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3004,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-calendar\/","url_meta":{"origin":3022,"position":3},"title":"Angular Material Calendar","author":"Jeffery Miller","date":"March 29, 2021","format":false,"excerpt":"Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a\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\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3012,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-maintenance-alert-system\/","url_meta":{"origin":3022,"position":4},"title":"Angular Maintenance Alert System","author":"Jeffery Miller","date":"April 12, 2021","format":false,"excerpt":"So often we need to schedule maintenance on a system, and we need to be able to stop users from doing things during this time. To that end, here is a system I created. It uses a Spring backend, that is not presented here. Created a method that would contact\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\/03\/wrench-717684_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\/2021\/03\/wrench-717684_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/wrench-717684_640.jpg?fit=640%2C426&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":3022,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3022","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=3022"}],"version-history":[{"count":3,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3022\/revisions"}],"predecessor-version":[{"id":3028,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3022\/revisions\/3028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/3023"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3022"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=3022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}