Using custom components inside ion-contnent

Ionic Framework Ionic Angular
1

As I use my custom component inside an ion-content to have my component scroll, it gone.
when use it alone in the page without ion-component it appears.

2

can you be please detail what you are expecting and what is the issue in detail?

1 Like
3

I’m new to programming anyway this is my problem:
I created a custom component whose role is to get an input from the user and highlight hashtags and which is composed of two divs one contenteditable for the input and the other for highlights.
this its my code:
custom component

<div class="below" [innerHTML]="highlighter()"></div>
<div class="input" contenteditable (input)="onNameChange($event.target.innerHTML)" ></div>

css:


:host ::ng-deep span{
  
  color: rgb(0, 119, 255);

  
}

div {
  position: absolute;
  height: auto;
}
.input {
  caret-color: blueviolet;
  z-index: 1;
  color: transparent;

  background-color: transparent;
  width: 100%;
overflow-wrap: break-word;
 
}
.below {
  color: black;
  z-index: -1;
  white-space: pre-wrap;
	width: 100%;
  
  overflow: auto;
 overflow-wrap: break-word;
  
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box
}
button {
  position: fixed;
  top: 180px
}
h3 {
  position: relative;
  top: 200px;
  color: blue;
}

and this is where I want to put my custom component:
module:

import { NgModule, } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { CreatePageRoutingModule } from './create-routing.module';

import { CreatePage } from './create.page';
import { ComposModule } from 'src/app/compos/compos/compos.module';

@NgModule({
  imports: [
    ComposModule,
    CommonModule,
    FormsModule,
    IonicModule,
    CreatePageRoutingModule
  ],
  
  declarations: [CreatePage] ,

  
})
export class CreatePageModule {}

html:

<ion-content>
<app-gap-tool></app-gap-tool>
</ion-content>

I want to want it to behave as it behaves here in stackblitz with scrolling and highlight effect
https://stackblitz.com/edit/highlight-hashtags?file=src/app/app.component.ts

4

There can only be one <ion-content> in the DOM at any given time, which effectively means you only want to be putting that element in top-level pages, not embedded components.

Additionally, especially if you’re new to web apps, please pretend innerHTML doesn’t exist. The window between “gaping security hole” and “useless pile of trash” is vanishingly narrow.

I recommend confining HTML to templates. Do not process it in the TypeScript (controller) side of your code. Do not use it as a transport format.

5

First, I think my problem is on how to style in ionic. Shadow DOM and CSS variables… total mess.
Second, concerning security. Should one use angular renderer2? Is it safe? Or should one avoid it at beginner level.

6

One way to think of Ionic is as a library of components that are optimized to be consistently usable in a multitude of different environments: Android, iOS, Electron, browser. Part of that consistency and usability is predicated on you and me not messing with their internals.

Perhaps you’ve heard of the bromide about certain libraries or frameworks “making ordinary tasks easy and difficult ones possible”. I fundamentally think this doesn’t really apply for web applications, for several reasons, including the fact that the ecosystem is so complex and the language we are working in (JavaScript) scales so poorly. So, instead, I would suggest thinking about things this way: is there a clear, documented way to build the house I want to build, given the building blocks I have lying around? If not, then go find different building materials. Don’t try to make a doghouse out of matchsticks.

So,

Shadow DOM exists to facilitate protecting components from external interference. Work with it; respect it - don’t try to subvert it. CSS variables are designed to allow you to change things that can be changed without breaking the overall promise of “consistent usability”. If I don’t find one that gives me the customization I initially desire, the first thing I do is to have a serious discussion about whether that’s really customization I should be doing. Most of the time, frankly, the answer is “no”. The restrictive nature of shadow DOM protects the work of people who know what they’re doing about UX design from idiots like me.

No, but not entirely for security reasons. It’s simply too low-level of an object to be futzing with, especially if you’re unfamiliar with the framework. You will instantly lose the forest for the trees. Take the time to go through the Tour of Heroes, and look for features and idioms that seem similar to the app you have in mind. Emulate them.

For an alternative approach that avoids innerHTML in a safe and extensible idiomatic Angular fashion, you may want to check out skeletons and bones.

2 Likes