Universal Angular along with Window's Innerwidth

Utilizing Window.Innerwidth in my Angular Project has been successful, however, I encountered an issue when attempting to implement it into Angular Universal. The content within window.innerwidth does not appear in the view source. Here is a snippet of my code:

hidemobile: any;
hidedesktop: any;

onresize() {
  let width = window.innerWidth;
  if (width < 420) {
    this.hidemobile = false;
    this.hidedesktop = true;
  } else {
    this.hidemobile = true;
    this.hidedesktop = false; 
  }
}

The HTML structure looks like this:

<div *ngIf="hidedesktop" class="top_projects_section">
    <h2>TOP Header</h2>
</div>

<div *ngIf="hidemobile" class="top_projects_section">
   <h2>TOP Header</h2>
</div>

Answer №1

When working with angular universal, it's important to note that the window object is not available. An alternative approach could be utilizing the user agent header from the request to determine the client's device.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for maintaining the orderby values in IEnumerable despite multiple switch case executions

I am working with a IEnumerable<Cars> variable where I store values from the database. My goal is to enable sorting based on user input for this variable. The UI displays columns such as Car Model, Car Model's year, Number of car sold out, and ...

The occurrence of a loading error arises when attempting to load the second component, displaying the message 'The template instructed for component SidebarComponent is

My journey with Angular has just begun, and I decided to challenge myself by creating a simplistic dashboard. In order to achieve this, I developed two components called DashboardComponent and SidebarComponent. The DashboardComponent loads smoothly witho ...

How can we regularly retrieve data in Angular 5 using Observables, while also incorporating instant fetching with RxJs 5.x?

Currently, I am in the process of developing a Single Page Application using Angular 5. One of the requirements is to periodically check if the API version matches the one loaded when the SPA was initialized. This check is essential to inform the user abou ...

"Using TypeScript: How to effectively wait for the completion of the array.sort

Need to implement a loading screen in Angular until an array is sorted. Solution provided below: this.isSorting = true; this.array = this.array.sort((a,b) => a.totlaTime - b.totalTime); this.isSorting = false; The issue faced is when isSorting is set t ...

Tips for Running Angular 2 Webpack Application on AWS EC2 Instance

I am currently running an AngularJs 2 application in development mode using the webpack-development-server My goal is to deploy this on EC2. So far, I have: - set up a new linux instance - installed node.js and npm - cloned my repository from git ...

Struggling to locate the module in React Native with TypeScript configuration

Currently, I am in the middle of transitioning our react-native project from JavaScript to TypeScript. As I attempt to import old modules, I keep encountering the following error: Cannot find module 'numeral' Oddly enough, the 'numeral&apo ...

The React-widgets DateTimePicker is malfunctioning and displaying an error stating that it cannot assign to the type of 'Readonly<DateTimePickerProps>'

Hello there! I am a newcomer to TypeScript and I am facing difficulty in understanding an error. Any help regarding this will be greatly appreciated. I have tried searching for solutions online and even attempted changing the version, but I am unsure of wh ...

Enhancing RTK Query: Efficiently Filtering Query Results in Separate Components

I am currently working on a Todo application using Nextjs 13 with various tools such as app directory, prisma, redux toolkit, shadcnui, and clerk. Within my app, I have implemented two key components - TodoList and Filter. The TodoList component is respons ...

"Exploring the world of mocking module functions in Jest

I have been working on making assertions with jest mocked functions, and here is the code I am using: const mockSaveProduct = jest.fn((product) => { //some logic return }); jest.mock('./db', () => ({ saveProduct: mockSaveProduct })); ...

Dispatching an asynchronous function error in React with TypeScript and Redux - the parameter type is not assignable to AnyAction

Currently, I am in the process of developing a web application that utilizes Firebase as its database, along with Redux and TypeScript for state management. Within my code, I have a dispatch function nested inside a callback function like so: export const ...

Utilize Angular 5 to implement URL routing by clicking a button, while also preserving the querystring parameters within the URL

I have a link that looks like this http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0 The router module is set up to display content based on the above URL structure { path: & ...

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

Tips for sending an array containing objects with an ID using Angular

Can you give me your thoughts on how to post an array with some object? This is the code I am working with: const selectedJobs = this.ms.selectedItems; if (!selectedJobs) { return; } const selectedJobsId = selectedJobs.map((jobsId) => ...

When checking for a `null` value, the JSON property of Enum type does not respond in

Within my Angular application, I have a straightforward enum known as AlertType. One of the properties in an API response object is of this enum type. Here is an example: export class ScanAlertModel { public alertId: string; public alertType: Aler ...

Tips for implementing debounce functionality in mui Autocomplete

How can I debounce the onInputChange function within the MyAutocomplete component? export interface AutocompleteProps<V extends FieldValues> { onInputChange: UseAutocompleteProps<UserOrEmail, true, false, false>['onInputChange']; } ...

Adding parameters to Angular HTML element selector directives can be achieved by utilizing the directive's input properties

I have created a straightforward directive that targets an img element. @Directive( { selector: 'img' } ) export class ImageDirective { ... } Is there a way for me to add a boolean parameter to this directive? @Input() enabled: boolean = fals ...

What are the methods for providing both successful and unsuccessful promises, with or without data?

Seeking guidance on how to return a promise and an object named output before or after the $http call in AngularJS, specifically using Typescript. How can I ensure it works correctly? topicNewSubmit = (): ng.IPromise<any> => { var self = t ...

Can you provide guidance on how to access my account using the code that I have?

I'm having trouble getting the login functionality to work properly with this code. When I click the login button, nothing happens - no errors are displayed either. Can you help me identify what might be causing this issue? login() { var url = &ap ...

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

Creating a unique optional string array interface in TypeScript

I am looking to create an interface that includes optional string values. Here is what I have in mind: interface IEntity { values: ['RemainingUnits', 'ActualUnits', 'PlannedUnits'] } However, when implementing this inter ...