Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside each other.

<div class="row">
  <div class="col-md-5 ">
    <app-recipe-list></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipes-details></app-recipes-details>
  </div>
</div>

<p>recipe-list is functioning correctly!</p> <p>The recipes-details component works as expected!</p>
cssangular

Answer №1

An issue arises where the component takes up the full width of the window. To address this, add a class directly to the component:

<div class="row">
  <app-recipe-list class="col-5"></app-recipe-list>
  <app-recipes-details class="col-7"></app-recipes-details>
</div>

In addition, give them the style display: inline-block;. The optimal approach would be to utilize the :host pseudoclass in the component's CSS (in recipe-list.component.css and recipes-details.component.css):

:host {
  display: inline-block;
}

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

Step-by-step guide on importing `block-ui`, `spectrum-colorpicker`, and `sass.js` libraries in a TypeScript project

I have been utilizing various plugins such as block-ui, spectrum-colorpicker, sass.js, etc., in my Angular 2 project written in TypeScript. Currently, I am loading these plugins directly in the index.html file. However, I would like to import them and onl ...

typescriptangular

Setting up an nginx configuration that seamlessly integrates an Angular 4 application and a WordPress blog within the same route

Presumption: The current system is hosted on https://example.com [which is statically served from /home/centos/projects/dist.example.com] My attempt was to set up the path https://example.com/blogs to run a WordPress blog application. This is my conf ...

phpwordpressangularnginxcentos7

Managing collapsible content in Bootstrap 4: A comprehensive guide

How can I customize collapsible content in Bootstrap 4? For instance, take a look at this navbar: https://i.sstatic.net/UYbMQ.png https://i.sstatic.net/OuVdw.png https://i.sstatic.net/lXvYt.png I'm looking to modify the behavior of this example. ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

I aim to link a variable in a directive with a component

Each directive comes with its own functionality and specific features. It can be challenging to understand how to connect a variable from a directive to a component. This particular directive involves detecting x-axis and y-axis positions during mouse ev ...

angulartypescriptangular-directiveangular-components

Utilizing ng-container for nested conditions in *ngIf statements

I have a project where I need to display rows based on specific conditions. There is a table cell (td) that needs to be populated according to certain criteria. I am looking to achieve this functionality in Angular using *ngIf if(value1||values2) { if( ...

angularif-statementangular-ng-if

Building and Publishing a Local Library with Angular CLI Version 6

I recently created my own library using the new angular-cli command: library. Upon building the library, I attempted to import it into an existing project (without publishing to npm) but encountered some difficulties. While manually copying it into the no ...

angularangular-cliangular-cli-v6

Unlinked Typescript blob file name

Is there a way to set the file name for a blob in typescript? I have found a solution for IE, but it seems impossible for Chrome. I need something similar to this solution, but in typescript. downloadFile(data: any) { var blob = new Blob([data], {type ...

google-chromeangulartypescriptblob

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...

javascripthtmlcss

Is it possible to import SVG files and inline them in Angular?

Behold, an SVG Circle: <svg viewBox="0 0 104 104"> <circle cx="52" cy="52" r="50" stroke="#003EFF" stroke-width="4" fill="#00FF98" /> </svg> The Angular Project imports it in this manner: import circle from './circle.svg'; ...

javascriptangulartypescriptecmascript-6single-page-application

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

javascriptjqueryhtmlcss

Placement: fresh column in absolute position

Could someone please help me understand this situation? I have posted my code on jsfiddle. I am using Bootstrap 4. In my design, I have text placed over an image with the parent div having position:relative. The left div has position:absolute and left:2%, ...

htmlcsstwitter-bootstrap

Managing Geolocation in Ionic2 presenting challenges

Attempting to utilize Geolocation in ionic2 for device location access. Referred to the official documentation on https://ionicframework.com/docs/native/geolocation/. Successfully installed the necessary packages: $ ionic plugin add cordova-plugin-geoloca ...

angulartypescriptionic-frameworkionic2

Troubleshoot Issue with Installation of angular2-jwt.js and Provide Solutions for Error Code

I am currently following the installation guidelines to install Respond CMS from Github. My progress has hit a snag while attempting to copy files to the public folder using gulp. and it's the third command in step 2. This brief error message aris ...

angulargulprespondcms

Utilizing CSS to Rearrange Columns Depending on Screen Size

Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...

htmlcss

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

jqueryhtmlcss

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Currently, I am working on unit tests for an Angular application using Jasmine and Karma. One of the unit tests involves opening a modal and removing an item from a tree node. Everything goes smoothly until the removeItem() function is called. This functi ...

angulartypescriptunit-testingjasminekarma-jasmine

Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off. The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed. Currently, the tex ...

htmlcss

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay

Reposition icons accordingly while incorporating a new set of icons

After creating a new icon set font, I noticed that the icons are not positioning correctly and appear smaller than expected when loaded: https://i.stack.imgur.com/1OsAL.png https://i.stack.imgur.com/zmLQq.png I attempted to adjust the .icon class by add ...

css

Ways to integrate a CSS file into XSLT

I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...

javascripthtmlcssxmlxslt